在搭建博主博客的時候，尋思着做一些效果，看到菜單，就想是不是可以做一下顏色的漸變，增加一點動態的感覺。有個jquery的插件，效果相當不錯，不過博主還是打算自立更生寫一下，看看能不能實現。
下面就是博主的一些思路和解決辦法，如果對此沒興趣，想直接使用jquery插件的同學，可以點這里
測試
思路
- 每一種顏色由RGB組成，每兩位為一個16進制數
- 當前顏色代碼和目標顏色代碼，轉換成10進制數后，是有差值的，利用差值，設定總執行次數的步長，計算每一步變更顏色的10進制數
- 利用定時器執行
簡單的講，就是將6位顏色代碼以每兩位轉換為10進制數，然后計算兩對RGB值的差，根據設定的步長（執行次數），計算每一步需要增加或減少的RGB值，最后變為目標顏色的RGB值
需要解決的問題
- 將6位顏色代碼轉換為10進制
- 根據步長計算每一步增加或減少數值
- 使用定時器執行這個增加或減少的過程
1、將6位顏色代碼轉換為10進制
關於16進制轉為10進制，學校課本上就已經講過了。個位*16的0次方，十位*16的1次方，以此類推。顏色是由RGB組成，每兩位為一組，如：#123456，R=12，G=34，B=56，但實際上RGB值是10進制，所以，R=12只能說是對應的位置，12轉為10進制：2*1+1*16=18，34：4*1+3*16=52，56：6*1+5*16=96，所以RGB=[18,52,96]。
這是數字的，但16進制還有A-F，所以還得先將A-F轉為10-15，可以先用一個數組來保存整個16進制對應的數
var f=new Array(); 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();//轉換為大寫
接着就是16進制轉為10進制
//code即為6位顏色代碼，如：f07786; var r=f[code[0]]*16+f[code[1]]; var g=f[code[2]]*16+f[code[3]]; var b=f[code[4]]*16+f[code[5]];
整個轉換的代碼，寫成一個方法
function colorConversion(code){ var len=code.length; var f=new Array(); 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();//轉換為大寫 var s=code.substr(0,1); if(s=='#'){ code=code.substr(1,6); } var r=f[code[0]]*16+f[code[1]]; var g=f[code[2]]*16+f[code[3]]; var b=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倍步長。這里可以使用這么一句簡單的計算
var step=10; var _step=step; //循環體內 var s=(step-_step)+1; _step--;
接着判斷當前顏色RGB值和目標RGB的是增加還是減少
var r=_step==1?_toRGB[0]:(_thisRGB[0]>_toRGB[0]?_thisRGB[0]-_R_step*s:_thisRGB[0]+_R_step*s); var g=_step==1?_toRGB[1]:(_thisRGB[1]>_toRGB[1]?_thisRGB[1]-_G_step*s:_thisRGB[1]+_G_step*s); var b=_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：執行速度 */ function colorGradient(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); } var step=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); var timer=setInterval(function(){ if(_step>0){ var s=(step-_step)+1; var r=_step==1?_toRGB[0]:(_thisRGB[0]>_toRGB[0]?_thisRGB[0]-_R_step*s:_thisRGB[0]+_R_step*s); var g=_step==1?_toRGB[1]:(_thisRGB[1]>_toRGB[1]?_thisRGB[1]-_G_step*s:_thisRGB[1]+_G_step*s); var b=_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){ var cr=_step==1?_toColor[0]:(_thisColor[0]>_toColor[0]?_thisColor[0]-_R_step*s:_thisColor[0]+_R_step*s); var cg=_step==1?_toColor[1]:(_thisColor[1]>_toColor[1]?_thisColor[1]-_G_step*s:_thisColor[1]+_G_step*s); var cb=_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); return true; } },_speed); }
這個方法很簡單，但漸變的平滑度一般，特別是在一組對象連續執行的時候。只能說，這是一種很吊絲，很笨的方法，大神都是用Tween算法
jQuery顏色漸變插件
使用方法，直接使用jquery的animate就可以了，只是不用指定當前顏色，程序會自動取當前顏色，不過必須在樣式里設定background
obj.animate({'background-color':'#ff0000','color':'#000000'});