Javascript 顏色漸層效果的實作程式碼_javascript技巧

以下就是部落客的一些想法和解決辦法，如果對此沒興趣，想直接使用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.length;
    var f=new Array();
    f['0']=0;
    f['1']=1;
  ;
    f['3']=3;
    f['4']=4;
    f['5']=5;
    f['6']=6;
    f['7']=7;
    f['8']=8;
    f['9']=9;
    f['A']=19']=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 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; (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=10;
var. ;
//循環體內

var s=(step-_step) 1;_step--;

接著判斷目前顏色RGB值和目標RGB的是增加還是減少 複製程式碼

代碼如下:


var r=_step==1_toRGB[0?_toRGB[0? :(_thisRGB[0]>_toRGB[0]?_thisRGB[0]-_R_step*s:_thisRGB[0] _R_step*s);

var g=_step==1?_toRGB[1]:(_thisRGB[11 ]>_toRGB[1]?_thisRGB[1]-_G_step*s:_thisRGB[1] _G_step*s);var b=_step==1?_toRGB[2]:(_thisRGB[2]>_toRGB[222 ]?_thisRGB[2]-_B_step*s:_thisRGB[2] _B_step*s);

最後，將顏色輸出 複製程式碼

程式碼如下:

obj.css({'background-color':'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,thisRGB,toRGB,this ,toColor,step,speed){
    var _thisRGB=colorConversion(thisRGB); //16進位轉換10進位
    var _toRGB=colorConversion(toRGB); var _thisColor=colorConversion(thisColor,1);
        var _toColor=colorConversion(toColor,1);
    }


   step;
    var _speed=speed?parseInt(speed/step):30;  //依照總時間計算每次執行的速率
    var _R_step=parseInt(Math.abs(_thisRGB[0]-_RGB[0]) /_step);
    var _G_step=parseInt(Math.abs(_thisRGB[1]-_toRGB[1])/_step);
    var _B_step=parsestep);
    var _B_step=parsestep);
    var _B_step=parsestep);    var _B_step=parsestep); ])/_step);

    var timer=setInterval(function(){
        if(_step>0){
            var r=_step==1?_toRGB[0] :(_thisRGB[0]>_toRGB[0]?_thisRGB[0]-_R_step*s:_thisRGB[0] _R_step*s);
          ]>_toRGB[1]?_thisRGB[1]-_G_step*s:_thisRGB[1] _G_step*s);
            var b=_step==1?_toRGB[R2:0_toRGB[R2_4_toRGB] ]?_thisRGB[2]-_B_step*s:_thisRGB[2] _B_step*s);
            obj.css({'background-color':'rgb(' r ', g 'obj.css({'background-color':'rgb(' r ' });
            if(thisColor&&toColor){
             -_R_step*s:_thisColor[0 ] _R_step*s);
                var cg=_step==1?_toColor[1]:(_thisColor[1]>_ColColor[1]? ;
                var cb=_step==1?_toColor[2]:(_thisColor[2]>_toColor[2]?_thisColor[2]-_B_thisColor[2]>_toColor[2]?_thisColor[2]-_B_thisColor[2]>_toColor[2]?_thisColor[2]-_B_thisp*s:           obj .css({'color':'rgb(' cr ',' cg ',' cb ')'});
            }
   🎜>            clearInterval(timer );
            return true;
       ,
    },_speed);這個方法很簡單，但漸變的平滑度一般，特別是在一組物件連續執行的時候。只能說，這是一種很弔絲，很笨的方法，大神都是用Tween算法


jQuery顏色漸層外掛程式

jquery.animate-colors-min.js

使用方法，直接使用jquery的animate就可以了，只是不用指定當前顏色，程式會自動取當前顏色，不過必須在樣式裡設定background

複製程式碼

程式碼如下:

obj.animate({'background-color':'background-color':' #ff0000','color':'#000000'});