Javascript颜色渐变效果的实现代码

整个转换的代码，写成一个方法

复制代码代码如下:
functioncolorConversion(code){
   varlen=code.length;
   varf=newArray();
   f["0"]=0;
   f["1"]=1;
   f["2"]=2;
   f["3"]=3;
   f["4"]=4;
   f["5"]=5;
   f["6"]=6;
   f["7"]=7;
   f["8"]=8;
   f["9"]=9;
   f["A"]=10;
   f["B"]=11;
   f["C"]=12;
   f["D"]=13;
   f["E"]=14;
   f["F"]=15;
   code=code.toLocaleUpperCase();//转换为大写
   vars=code.substr(0,1);
   if(s=="#"){
       code=code.substr(1,6);
   }
   varr=f[code[0]]*16+f[code[1]];
   varg=f[code[2]]*16+f[code[3]];
   varb=f[code[4]]*16+f[code[5]];
   return[r,g,b];
}

代码中的s，是用来判断颜色代码是否带有#号，有就去掉，最后返回一个包含RGB值的数组

计算增加或减少的步长

比如，设定颜色变化次数为10次，那就需要计算这10次变化，每一次RGB值的增减数值是多少。利用当前颜色的RGB值和目标颜色的RGB的差取绝对值，然后除以10，可以得到一个步长，但这个值很可能是小数，可以把小数舍去，那么在最后一步增减数值的时候，直接变到目标颜色的RGB值就行了

复制代码代码如下:
var_step=10;
var_R_step=parseInt(Math.abs(_thisRGB[0]-_toRGB[0])/_step);//R的增减步长
var_G_step=parseInt(Math.abs(_thisRGB[1]-_toRGB[1])/_step);//G的增减步长
var_B_step=parseInt(Math.abs(_thisRGB[2]-_toRGB[2])/_step);//B的增减步长

每次执行增减

如果执行次数为10，也就是要连续的执行10次，当_step=1的时候，就算执行完成。那么在增减步长上，就会出现，如果_step=10，那么增减就是1倍步长，如果_step=9，也就是执行到第二步，那增减的就是2倍步长，一直到_step=1，增减9倍步长。这里可以使用这么一句简单的计算

复制代码代码如下:
varstep=10;
var_step=step;
//循环体内
vars=(step-_step)+1;
_step--;

接着判断当前颜色RGB值和目标RGB的是增加还是减少

复制代码代码如下:
varr=_step==1?_toRGB[0]:(_thisRGB[0]>_toRGB[0]?_thisRGB[0]-_R_step*s:_thisRGB[0]+_R_step*s);
varg=_step==1?_toRGB[1]:(_thisRGB[1]>_toRGB[1]?_thisRGB[1]-_G_step*s:_thisRGB[1]+_G_step*s);
varb=_step==1?_toRGB[2]:(_thisRGB[2]>_toRGB[2]?_thisRGB[2]-_B_step*s:_thisRGB[2]+_B_step*s);

最后，将颜色输出

复制代码代码如下:
obj.css({"background-color":"rgb("+r+","+g+","+b+")"});

这里输出的是rgb()的方式，没关系，和颜色代码同理，如果觉得还是输出6位代码，那就将10进制转成16进制就好了

最后就是用定时器来执行，中间还有对速度和计算，这里就不讲了。最后的执行代码：

复制代码代码如下:
/*
参数：
obj：目标对象
thisRGB：当前背景颜色的6位代码
toRGB：目标背景颜色的6位代码
thisColor：当前文字颜色的6位代码
toColor：目标文字颜色的6位代码
step：执行次数
speed：执行速度
*/
functioncolorGradient(obj,thisRGB,toRGB,thisColor,toColor,step,speed){
   var_thisRGB=colorConversion(thisRGB);//16进制转换10进制
   var_toRGB=colorConversion(toRGB);
   if(thisColor&&toColor){
       var_thisColor=colorConversion(thisColor,1);
       var_toColor=colorConversion(toColor,1);
   }

   varstep=step?step:3;
   var_step=step;
   var_speed=speed?parseInt(speed/step):30; //根据总时间计算每次执行的速度
   var_R_step=parseInt(Math.abs(_thisRGB[0]-_toRGB[0])/_step);
   var_G_step=parseInt(Math.abs(_thisRGB[1]-_toRGB[1])/_step);
   var_B_step=parseInt(Math.abs(_thisRGB[2]-_toRGB[2])/_step);

   vartimer=setInterval(function(){
       if(_step>0){
           vars=(step-_step)+1;
           varr=_step==1?_toRGB[0]:(_thisRGB[0]>_toRGB[0]?_thisRGB[0]-_R_step*s:_thisRGB[0]+_R_step*s);
           varg=_step==1?_toRGB[1]:(_thisRGB[1]>_toRGB[1]?_thisRGB[1]-_G_step*s:_thisRGB[1]+_G_step*s);
           varb=_step==1?_toRGB[2]:(_thisRGB[2]>_toRGB[2]?_thisRGB[2]-_B_step*s:_thisRGB[2]+_B_step*s);
           obj.css({"background-color":"rgb("+r+","+g+","+b+")"});
           if(thisColor&&toColor){
               varcr=_step==1?_toColor[0]:(_thisColor[0]>_toColor[0]?_thisColor[0]-_R_step*s:_thisColor[0]+_R_step*s);
               varcg=_step==1?_toColor[1]:(_thisColor[1]>_toColor[1]?_thisColor[1]-_G_step*s:_thisColor[1]+_G_step*s);
               varcb=_step==1?_toColor[2]:(_thisColor[2]>_toColor[2]?_thisColor[2]-_B_step*s:_thisColor[2]+_B_step*s);
               obj.css({"color":"rgb("+cr+","+cg+","+cb+")"});
           }
           _step--;
       }else{
           clearInterval(timer);
           returntrue;
       }
   },_speed);
}

这个方法很简单，但渐变的平滑度一般，特别是在一组对象连续执行的时候。只能说，这是一种很吊丝，很笨的方法，大神都是用Tween算法

使用方法，直接使用jquery的animate就可以了，只是不用指定当前颜色，程序会自动取当前颜色，不过必须在样式里设定background

复制代码代码如下:
obj.animate({"background-color":"#ff0000","color":"#000000"});

本文地址： Javascript颜色渐变效果的实现代码