JavaScript实现的鼠标响应颜色渐变效果完整实例

本文实例讲述了JavaScript实现的鼠标响应颜色渐变效果。分享给大家供大家参考，具体如下：

运行效果图如下：

完整代码如下：

<script type="text/javascript">//--------------------------------------------------------------------//基础类库://1.获取对象：function $(id){  return typeof id=='string'?document.getElementById(id):id;  }//2.添加事件监听：function addEventHandler(oTarget,sEventType,fnHandler){    if(oTarget.addEventListener){        oTarget.addEventListener(sEventType,fnHandler,false);      }else if(oTarget.attachEvent){        oTarget.attachEvent("on"+sEventType,fnHandler);      }else{        oTarget["on"+sEventType]=fnHandler;      }  }//3.自定"义产生对象"类：var Class={    Create:function(){        return function(){            this.initialize.apply(this,arguments);          }      }  }//4.对象属性合并：Object.extend=function(destination,source){    for(var property in source){      destination[property]=source[property];    }    return destination;  }//--------------------------------------------------------------------var colorFade=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);        //为对象添加事件：        var oThis=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){        var curColor=sColor.replace("#","");        var r,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){      var stepValue=Math.abs((eRGB-sRGB)/this.Steps);      if(stepValue>0&&stepValue<1){        stepValue=1;      }      return parseInt(stepValue);    },    /*      5.得到当前渐变颜色的"r.g.b"信息数组。      startColor:开始的颜色，格式为"#ccc000"；      iStep:当前渐变的级数（即当前渐变的次数）。      返回颜色值，如 #fff000。    */    getStepColor:function(sColor,eColor,addValue){         if(sColor==eColor){          return sColor;        }else if(sColoreColor?eColor:(sColor+addValue);        }else if(sColor>eColor){          return (sColor-addValue) 255) return "ff";  else {    //十进制 转成 十六进制：    var str = "0" + i.toString(16);    return str.substring(str.length - 2);  }}《script》
  嘻嘻!
  呵呵!
  哈哈!
<script type="text/javascript">var colorFade01=new colorFade("test",{StartColor:'#000000',EndColor:'#8AD4FF',Background:true});var colorFade02=new colorFade("test",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false});var colorFade03=new colorFade("test1",{StartColor:'#000000',EndColor:'#8AD4FF',Background:true});var colorFade04=new colorFade("test1",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false});var colorFade05=new colorFade("test2",{StartColor:'#000000',EndColor:'#8AD4FF',Background:true});var colorFade06=new colorFade("test2",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false});《script》

更多JavaScript实现的鼠标响应颜色渐变效果完整实例相关文章请关注PHP中文网！