快捷導(dǎo)航

Javascript 顏色漸變效果的實(shí)現(xiàn)代碼

更新時(shí)間：2013年10月01日 14:57:20 作者：

在搭建博主博客的時(shí)候，尋思著做一些效果，看到菜單，就想是不是可以做一下顏色的漸變，增加一點(diǎn)動(dòng)態(tài)的感覺。有個(gè)jquery的插件，效果相當(dāng)不錯(cuò)，不過博主還是打算自立更生寫一下，看看能不能實(shí)現(xiàn)

下面就是博主的一些思路和解決辦法，如果對(duì)此沒興趣，想直接使用jquery插件的同學(xué)，可以點(diǎn)這里

思路

每一種顏色由RGB組成，每兩位為一個(gè)16進(jìn)制數(shù)
當(dāng)前顏色代碼和目標(biāo)顏色代碼，轉(zhuǎn)換成10進(jìn)制數(shù)后，是有差值的，利用差值，設(shè)定總執(zhí)行次數(shù)的步長，計(jì)算每一步變更顏色的10進(jìn)制數(shù)
利用定時(shí)器執(zhí)行
簡(jiǎn)單的講，就是將6位顏色代碼以每兩位轉(zhuǎn)換為10進(jìn)制數(shù)，然后計(jì)算兩對(duì)RGB值的差，根據(jù)設(shè)定的步長（執(zhí)行次數(shù)），計(jì)算每一步需要增加或減少的RGB值，最后變?yōu)槟繕?biāo)顏色的RGB值

需要解決的問題

將6位顏色代碼轉(zhuǎn)換為10進(jìn)制
根據(jù)步長計(jì)算每一步增加或減少數(shù)值
使用定時(shí)器執(zhí)行這個(gè)增加或減少的過程
1、將6位顏色代碼轉(zhuǎn)換為10進(jìn)制

關(guān)于16進(jìn)制轉(zhuǎn)為10進(jìn)制，學(xué)校課本上就已經(jīng)講過了。個(gè)位*16的0次方，十位*16的1次方，以此類推。顏色是由RGB組成，每兩位為一組，如：#123456，R=12，G=34，B=56，但實(shí)際上RGB值是10進(jìn)制，所以，R=12只能說是對(duì)應(yīng)的位置，12轉(zhuǎn)為10進(jìn)制：2*1+1*16=18，34：4*1+3*16=52，56：6*1+5*16=96，所以RGB=[18,52,96]。

這是數(shù)字的，但16進(jìn)制還有A-F，所以還得先將A-F轉(zhuǎn)為10-15，可以先用一個(gè)數(shù)組來保存整個(gè)16進(jìn)制對(duì)應(yīng)的數(shù)

復(fù)制代碼代碼如下:

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;

因?yàn)轭伾a是不區(qū)分大小寫的，所以可以先把顏色全部轉(zhuǎn)換為大寫

復(fù)制代碼代碼如下:

code=code.toLocaleUpperCase();//轉(zhuǎn)換為大寫
接著就是16進(jìn)制轉(zhuǎn)為10進(jìn)制

//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]];

整個(gè)轉(zhuǎn)換的代碼，寫成一個(gè)方法

復(fù)制代碼代碼如下:

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();//轉(zhuǎn)換為大寫
    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，是用來判斷顏色代碼是否帶有#號(hào)，有就去掉，最后返回一個(gè)包含RGB值的數(shù)組

計(jì)算增加或減少的步長

比如，設(shè)定顏色變化次數(shù)為10次，那就需要計(jì)算這10次變化，每一次RGB值的增減數(shù)值是多少。利用當(dāng)前顏色的RGB值和目標(biāo)顏色的RGB的差取絕對(duì)值，然后除以10，可以得到一個(gè)步長，但這個(gè)值很可能是小數(shù)，可以把小數(shù)舍去，那么在最后一步增減數(shù)值的時(shí)候，直接變到目標(biāo)顏色的RGB值就行了

復(fù)制代碼代碼如下:

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的增減步長

每次執(zhí)行增減

如果執(zhí)行次數(shù)為10，也就是要連續(xù)的執(zhí)行10次，當(dāng)_step=1的時(shí)候，就算執(zhí)行完成。那么在增減步長上，就會(huì)出現(xiàn)，如果_step=10，那么增減就是1倍步長，如果_step=9，也就是執(zhí)行到第二步，那增減的就是2倍步長，一直到_step=1，增減9倍步長。這里可以使用這么一句簡(jiǎn)單的計(jì)算

復(fù)制代碼代碼如下:

var step=10;
var _step=step;
//循環(huán)體內(nèi)
var s=(step-_step)+1;
_step--;

接著判斷當(dāng)前顏色RGB值和目標(biāo)RGB的是增加還是減少

復(fù)制代碼代碼如下:

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);

最后，將顏色輸出

復(fù)制代碼代碼如下:

obj.css({'background-color':'rgb('+r+','+g+','+b+')'});

這里輸出的是rgb()的方式，沒關(guān)系，和顏色代碼同理，如果覺得還是輸出6位代碼，那就將10進(jìn)制轉(zhuǎn)成16進(jìn)制就好了

最后就是用定時(shí)器來執(zhí)行，中間還有對(duì)速度和計(jì)算，這里就不講了。最后的執(zhí)行代碼：

復(fù)制代碼代碼如下:

/*
參數(shù)：
obj：目標(biāo)對(duì)象
thisRGB：當(dāng)前背景顏色的6位代碼
toRGB：目標(biāo)背景顏色的6位代碼
thisColor：當(dāng)前文字顏色的6位代碼
toColor：目標(biāo)文字顏色的6位代碼
step：執(zhí)行次數(shù)
speed：執(zhí)行速度
*/
function colorGradient(obj,thisRGB,toRGB,thisColor,toColor,step,speed){
    var _thisRGB=colorConversion(thisRGB); //16進(jìn)制轉(zhuǎn)換10進(jìn)制
    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; //根據(jù)總時(shí)間計(jì)算每次執(zhí)行的速度
    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);