最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JavaScript实现的鼠标响应颜色渐变效果完整实例
时间:2017-04-17 编辑:简简单单 来源:一聚教程网
本文实例讲述了JavaScript实现的鼠标响应颜色渐变效果。分享给大家供大家参考,具体如下:
运行效果图如下:
完整代码如下:
代码如下 | 复制代码 |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> //-------------------------------------------------------------------- //基础类库: //1.获取对象: function$(id){ returntypeofid=='string'?document.getElementById(id):id; } //2.添加事件监听: functionaddEventHandler(oTarget,sEventType,fnHandler){ if(oTarget.addEventListener){ oTarget.addEventListener(sEventType,fnHandler,false); }elseif(oTarget.attachEvent){ oTarget.attachEvent("on"+sEventType,fnHandler); }else{ oTarget["on"+sEventType]=fnHandler; } } //3.自定"义产生对象"类: varClass={ Create:function(){ returnfunction(){ this.initialize.apply(this,arguments); } } } //4.对象属性合并: Object.extend=function(destination,source){ for(varpropertyinsource){ destination[property]=source[property]; } returndestination; } //-------------------------------------------------------------------- varcolorFade=Class.Create(); colorFade.prototype={ //1.类的初始化: initialize:function(obj,options){ this._obj=$(obj);//当前要改变颜色的对象。 this._timer=null;//计时器。 this.SetOptions(options);//传入的数组参数。 this.Steps=Math.abs(this.options.Steps); this.Speed=Math.abs(this.options.Speed); //this._colorArr:用来寄存当前颜色的r.g.b信息。 this.StartColorArr=this._colorArr=this.getColorArr(this.options.StartColor); this.EndColorArr=this.getColorArr(this.options.EndColor); this.Background=this.options.Background; //从开始到结束,r.g.b三种原色渐变的梯度值(即,每次渐变要增加/减少的值)。 this._stepAddValueArr=[this.getColorAddValue(this.StartColorArr[0],this.EndColorArr[0]),this.getColorAddValue(this.StartColorArr[1],this.EndColorArr[1]),this.getColorAddValue(this.StartColorArr[2],this.EndColorArr[2])]; //设置对象颜色: this._setObjColor=this.Background?function(sColor){ this._obj.style.backgroundColor=sColor; }:function(sColor){ this._obj.style.color=sColor; }; this._setObjColor(this.options.StartColor); //为对象添加事件: varoThis=this; addEventHandler(this._obj,"mouseover", function(){ oThis.Fade(oThis.EndColorArr); } ); addEventHandler(this._obj,"mouseout",function(){ oThis.Fade(oThis.StartColorArr); }); }, /* 2.对象属性初始化: */ SetOptions:function(options){ this.options={ StartColor: "#000000", EndColor: "#ffffff", Steps: 20,//渐变次数 Speed: 20,//渐变速度,即每隔多少(Speed)毫秒渐变一次。 Background:true//是否为对象背景渐变。 } //合并属性: Object.extend(this.options,options||{}); }, /* 3.得到某个颜色的"r.g.b"信息数组: sColor:被计算的颜色值,格式为"#ccc000"。 返回的一个数组。 */ getColorArr:function(sColor){ varcurColor=sColor.replace("#",""); varr,g,b; if(curColor.length>3){//六位值 r=curColor.substr(0,2); g=curColor.substr(2,2); b=curColor.substr(4,2); }else{ r=curColor.substr(0,1); g=curColor.substr(1,1); b=curColor.substr(2,1); r+=r; g+=g; b+=b; } //返回“十六进制”数据的“十进制”值: return[parseInt(r,16),parseInt(g,16),parseInt(b,16)]; }, /* 4.得到当前原色值(r.g.b)渐变的梯度值。 sRGB:开始颜色值(十进制) eRGB:结束的颜色值(十进制) */ getColorAddValue:function(sRGB,eRGB){ varstepValue=Math.abs((eRGB-sRGB)/this.Steps); if(stepValue>0&&stepValue<1){ stepValue=1; } returnparseInt(stepValue); }, /* 5.得到当前渐变颜色的"r.g.b"信息数组。 startColor:开始的颜色,格式为"#ccc000"; iStep:当前渐变的级数(即当前渐变的次数)。 返回颜色值,如 #fff000。 */ getStepColor:function(sColor,eColor,addValue){ if(sColor==eColor){ returnsColor; }elseif(sColor return(sColor+addValue)>eColor?eColor:(sColor+addValue); }elseif(sColor>eColor){ return(sColor-addValue) } }, /* 6.开始渐变: endColorArr:目标颜色,为r.g.b信息数组。 */ Fade:function(endColorArr){ clearTimeout(this._timer); varer=endColorArr[0], eg=endColorArr[1], eb=endColorArr[2], r=this.getStepColor(this._colorArr[0],er,this._stepAddValueArr[0]), g=this.getStepColor(this._colorArr[1],eg,this._stepAddValueArr[1]), b=this.getStepColor(this._colorArr[2],eb,this._stepAddValueArr[2]); this._colorArr=[r,g,b]; this._setObjColor("#"+Hex(r) + Hex(g) + Hex(b)); if(r!=er||g!=eg||b!=eb){ varoThis=this; oThis._timer=setTimeout(function(){oThis.Fade(endColorArr)},oThis.Speed); } } } //返回16进制数 functionHex(i) { if(i < 0)return"00"; elseif(i > 255)return"ff"; else{ //十进制 转成 十六进制: varstr ="0"+ i.toString(16); returnstr.substring(str.length - 2); } } 嘻嘻! 呵呵! 哈哈! varcolorFade01=newcolorFade("test",{StartColor:'#000000',EndColor:'#8AD4FF',Background:true}); varcolorFade02=newcolorFade("test",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false}); varcolorFade03=newcolorFade("test1",{StartColor:'#000000',EndColor:'#8AD4FF',Background:true}); varcolorFade04=newcolorFade("test1",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false}); varcolorFade05=newcolorFade("test2",{StartColor:'#000000',EndColor:'#8AD4FF',Background:true}); varcolorFade06=newcolorFade("test2",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false}); |
-
上一个: JS设置时间无效问题的解决办法
-
下一个: JS表单数据验证的正则表达式
相关文章
- JavaScript实现二分查找实例代码 04-24
- JavaScript实现图像模糊化的方法实例 02-04
- JavaScript中localStorage对象存储方式实例分析 01-14
- Javascript高性能之递归,迭代,查表法详解及实例 01-09
- javascript中定时器的实例代码 12-20
- JavaScript 创建对象的实例详解 06-28