女友用到这个算法,要我帮着写个双色平滑变化算法,花了2h,写了个,贴出来分享给大家: //功能:实现颜色平滑变化的算法,共3个辅助函数,1个功能函数 //code by 周育成,2010-1-11,All Rights Reserved © 2010-2011 //-----------辅助函数区--------------------------------------- //1.NumToInt(num)-四舍五入算法,对parseInt的取整算法进行补充 //2.ToRGB(ColorString)-将颜色字符串转化为数字RGB //3.ToHex(num,n)-将10进制的数字num转换为n位长的16进制数,其中不足位数用0补齐 function NumToInt(num) {//四舍五入算法 if (num>=(parseInt(num)+0.5)) { return parseInt(num)+1; } else { return parseInt(num); } } //将颜色字符串转化为数字RGB表示 function ToRGB(ColorString){ if(ColorString!="" || ColorString!=null) { //缓存颜色 var myrgb={"r":255,"g":255,"b":255}; var HexRGB={"HexR":"ff","HexG":"ff","HexB":"ff"}; //分割字符串,分离RGB颜色 HexRGB.HexR=ColorString.substr(0,2); HexRGB.HexG=ColorString.substr(2,2); HexRGB.HexB=ColorString.substr(4,2); myrgb.r=parseInt(HexRGB.HexR,16); myrgb.g=parseInt(HexRGB.HexG,16); myrgb.b=parseInt(HexRGB.HexB,16); return myrgb; } } //将10进制的数字num转换为n位长的16进制数,其中不足位数用0补齐 function ToHex(num,n) { num=num.toString(16);//16进制转换 var zero=""; if(num.length<n) { for(var i=0;i<n-1;i++){zero+="0";}//补齐 num=zero+num; } //document.write("num = "+ num +"<br />"); return num; } //-----------功能函数区--------------------------------------- //1.getFadeColorList(colorStart,colorEnd)-实现渐变色值的计算,返回渐变色值数组 function getFadeColorList(colorStart,colorEnd) { //初始化,转换RGB颜色 var rgbS=ToRGB(colorStart); var rgbE=ToRGB(colorEnd); //计算颜色差,保存在对象ColorDis中; var ColorDis={"r":0,"g":0,"b":0}; ColorDis.r=rgbE.r-rgbS.r; ColorDis.g=rgbE.g-rgbS.g; ColorDis.b=rgbE.b-rgbS.b; //比较得出最大的颜色差的绝对值,保存在ColorLength中; var ColorLength=Math.abs(ColorDis.r); //比较算法,求出ColorDis.r,ColorDis.g,ColorDis.b的最大者 if( ColorLength<=Math.abs(ColorDis.g) ) { ColorLength=Math.abs(ColorDis.g); if( ColorLength<=Math.abs(ColorDis.b) ) { ColorLength=Math.abs(ColorDis.b); } } //计算渐变色值缓存,每次颜色的变化用nowColor来缓存; var nowColor={"r":0,"g":0,"b":0}; //红色变化系数r var r=ColorDis.r/ColorLength; //绿色变化系数g var g=ColorDis.g/ColorLength; //蓝色变化系数b var b=ColorDis.b/ColorLength; var ColorList=new Array(); //循环计算出颜色变化列表 for (var i=0;i<ColorLength;i++) { nowColor.r=NumToInt(rgbS.r+r*i); nowColor.g=NumToInt(rgbS.g+g*i); nowColor.b=NumToInt(rgbS.b+b*i); //方法一、RGB三原色值显示输出在页面,取消注释可查看效果 //document.write(nowColor.r+","+nowColor.g+","+nowColor.b+"<br />"); //方法二、十六进制颜色值显示输出在页面,取消注释可查看效果 //document.write("#"+ToHex(nowColor.r,2)+ToHex(nowColor.g,2)+ToHex(nowColor.b,2)+"<br />"); //方法三、将每一条颜色色绘制在屏幕上面,取消注释可查看效果 //document.write("<div style="background:#"+ ToHex(nowColor.r,2)+ToHex(nowColor.g,2)+ToHex(nowColor.b,2)+"" mce_style="background:#"+ ToHex(nowColor.r,2)+ToHex(nowColor.g,2)+ToHex(nowColor.b,2)+""></div>"); //方法四、返回十六进制的颜色变化列表,如使用一、二、三效果,则不需返回ColorList值,请将return句子注释掉 ColorList[i]="#"+ToHex(nowColor.r,2)+ToHex(nowColor.g,2)+ToHex(nowColor.b,2); } //如使用一、二、三效果,则不需返回ColorList值 //请将以下句子注释掉 return ColorList; } //----------------测试用例---------------------------------- //1.创建新的数组对象 var ColorList=new Array(); //2.取颜色变化列表,保存在对象ColorList中 ColorList=getFadeColorList("FF0000","ff0001"); //3.遍历列表,并做相关的输出 for(var index in ColorList) { document.write("<div style='background:"+ ColorList[index] +"'></div>"); }