本文實例講述了jQuery與js實現顏色漸變的方法。分享給大家供大家參考，具體如下：
1.目的
本來想的是 提示用戶應該點某個按鈕 這個功能，就想著讓這個按鈕div的邊框變成醒目的顏色然后逐漸變白。
在網上搜了搜，本來想使用jQuery的animate，后來發現這個方法只能用來進行長度的漸變。還有就是需要下載jQuery的顏色漸變插件來實現，感覺挺麻煩的，就自己用土辦法實現了。
2.原理
先獲得初始顏色的rgb，再獲得終止顏色的rgb，使用rgb三個數字的差值，從初始顏色的rgb逐漸過渡到終止顏色的rgb。
3.代碼
獲得顏色rgb的代碼如下：
//將輸入的顏色字符串轉換成十進制數組function getData(color) { var re = RegExp; if (/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.test(color)) { //#rrggbb return [parseInt(re.$1,16),parseInt(re.$2,16),parseInt(re.$3,16)]; } else if (/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.test(color)) { //#rgb return [parseInt(re.$1+re.$1,16),parseInt(re.$2+re.$2,16),parseInt(re.$3+re.$3,16)]; } else if (/^rgb(.*),(.*),(.*)$/i.test(color)) { //rgb(n,n,n) or rgb(n%,n%,n%) if(re.$1.indexOf("%")>-1){ return [parseInt(parseFloat(re.$1, 10) * 2.55), parseInt(parseFloat(re.$2, 10) * 2.55), parseInt(parseFloat(re.$3, 10) * 2.55)]; }else{ return [parseInt(re.$1),parseInt(re.$2),parseInt(re.$3)]; } }}方法中沒有隊color的驗證之類的方法，見諒。傳入的參數color格式可以是："#1ba3e1"、"#f0e"、"rgb(200,50,100)"、"rgb(20%,80%,50%)"這四種格式。返回的是rgb三個數值組成的數組。
然后進行顏色的漸變：
(function($){$.fn.shade = function(prop,color1,color2,mills){ var count = mills/200; var data1 = getData(color1); var data2 = getData(color2); var red = data1[0],green = data1[1],blue = data1[2]; var r = (data2[0]-data1[0])/count,g = (data2[1]-data1[1])/count,b = (data2[2]-data1[2])/count; obj_temp = $(this); for(var i=1;i<count+1;i++){ setTimeout("$(obj_temp).css('"+prop+"','rgb("+parseInt(red+r*i+0.5)+","+ parseInt(green+g*i+0.5)+","+parseInt(blue+b*i+0.5)+")');", i*200); }}})(jQuery);這里我在jQuery中定義了一個shade函數，參數：對象漸變的屬性(如border-color)、起始顏色、終止顏色、變色所需時間。我規定了200ms進行一次變色(可以自行調整)，使用setTimeout函數每200ms執行一次變化。（我起初想使用while()或者遞歸來實現每隔一段時間執行一次變化，但js中的線程不像java中用Thread.sleep()就可以等待，所以不得不先將要運行的變色代碼全部扔到setTimeout中，等待依次執行。）
代碼中使用
$("#more").shade("border-color","#1ba3e1","#fff",2000);就可以實現了。
注：運行此函數需要定義一個obj_temp的全局變量。
如果運行出現BUG自行調試。。。Thanks for watching.
PS：這里再為大家推薦幾款本站的相關在線工具：
在線RGB、HEX顏色代碼生成器：
http://tools.VeVB.COm/color/rgb_color_generator
RGB顏色查詢對照表_顏色代碼表_顏色的英文名稱大全：
http://tools.VeVB.COm/color/jPicker
在線網頁調色板工具：
http://tools.VeVB.COm/color/color_picker
在線顏色選擇器工具/RGB顏色查詢對照表：
http://tools.VeVB.COm/color/colorpicker
更多關于JavaScript相關內容可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
