本文實例講述了JS實現顏色梯度與漸變效果的方法。分享給大家供大家參考，具體如下：
運行效果圖如下：
完整實例代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JavaScript 顏色梯度和漸變效果</title><script type="text/javascript">var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id;};var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination;}var Map = function(array, callback, thisObject){ if(array.map){ return array.map(callback, thisObject); }else{ var res = []; for (var i = 0, len = array.length; i < len; i++) { res.push(callback.call(thisObject, array[i], i, array)); } return res; }}var ColorGrads = function(options){ this.SetOptions(options); this.StartColor = this.options.StartColor; this.EndColor = this.options.EndColor; this.Step = Math.abs(this.options.Step);};ColorGrads.prototype = { //設置默認屬性 SetOptions: function(options) { this.options = {//默認值 StartColor: "#fff",//開始顏色 EndColor: "#000",//結束顏色 Step: 20//漸變級數 }; Extend(this.options, options || {}); }, //獲取漸變顏色集合 Create: function() { var colors = [], startColor = this.GetColor(this.StartColor), endColor = this.GetColor(this.EndColor), stepR = (endColor[0] - startColor[0]) / this.Step, stepG = (endColor[1] - startColor[1]) / this.Step, stepB = (endColor[2] - startColor[2]) / this.Step; //生成顏色集合 for(var i = 0, n = this.Step, r = startColor[0], g = startColor[1], b = startColor[2]; i < n; i++){ colors.push([r, g, b]); r += stepR; g += stepG; b += stepB; } colors.push(endColor); //修正顏色值 return Map(colors, function(x){ return Map(x, function(x){ return Math.min(Math.max(0, Math.floor(x)), 255); });}); }, //獲取顏色數據 GetColor: function(color) { if(/^#[0-9a-f]{6}$/i.test(color)) {//#rrggbb return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)], function(x){ return parseInt(x, 16); } ) } else if(/^#[0-9a-f]{3}$/i.test(color)) {//#rgb return Map([color.substr(1, 1), color.substr(2, 1), color.substr(3, 1)], function(x){ return parseInt(x + x, 16); } ) } else if(/^rgb(.*)$/i.test(color)) {//rgb(n,n,n) or rgb(n%,n%,n%) return Map(color.match(//d+(/./d+)?/%?/g), function(x){ return parseInt(x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x, 10); } ) } else {//color var mapping = {"red":"#FF0000"};//略 color = mapping[color.toLowerCase()]; if(color){ return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)], function(x){ return parseInt(x, 16); } ) } } }};var CurrentStyle = function(element){ return element.currentStyle || document.defaultView.getComputedStyle(element, null);}var Bind = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function() { return fun.apply(object, args.concat(Array.prototype.slice.call(arguments))); }}//漸變對象var ColorTrans = function(obj, options){ this._obj = $(obj); this._timer = null;//定時器 this._index = 0;//索引 this._colors = [];//顏色集合 this._grads = new ColorGrads(); this.SetOptions(options); this.Speed = Math.abs(this.options.Speed); this.CssColor = this.options.CssColor; this._startColor = this.options.StartColor || CurrentStyle(this._obj)[this.CssColor]; this._endColor = this.options.EndColor; this._step = Math.abs(this.options.Step); this.Reset(); this.SetColor();};ColorTrans.prototype = { //設置默認屬性 SetOptions: function(options) { this.options = {//默認值 StartColor: "",//開始顏色 EndColor: "#000",//結束顏色 Step: 20,//漸變級數 Speed: 20,//漸變速度 CssColor: "color"http://設置屬性（Scripting屬性） }; Extend(this.options, options || {}); }, //重設顏色集合 Reset: function(color) { //修改顏色后必須重新獲取顏色集合 color = Extend({ StartColor: this._startColor, EndColor: this._endColor, Step: this._step }, color || {}); //設置屬性 this._grads.StartColor = this._startColor = color.StartColor; this._grads.EndColor = this._endColor = color.EndColor; this._grads.Step = this._step = color.Step; //獲取顏色集合 this._colors = this._grads.Create(); this._index = 0; }, //顏色漸入 FadeIn: function() { this.Stop(); this._index++; this.SetColor(); if(this._index < this._colors.length - 1){ this._timer = setTimeout(Bind(this, this.FadeIn), this.Speed); } }, //顏色漸出 FadeOut: function() { this.Stop(); this._index--; this.SetColor(); if(this._index > 0){ this._timer = setTimeout(Bind(this, this.FadeOut), this.Speed); } }, //顏色設置 SetColor: function() { var color = this._colors[Math.min(Math.max(0, this._index), this._colors.length - 1)]; this._obj.style[this.CssColor] = "rgb(" + color[0] + "," + color[1] + "," + color[2] + ")"; }, //停止 Stop: function() { clearTimeout(this._timer); }};</script></head><body><style type="text/css">#idGrads{}#idGrads div{ font-size:0;height:1px;}</style><div id="idGrads"> </div><script>var forEach = function(array, callback, thisObject){ if(array.forEach){ array.forEach(callback, thisObject); }else{ for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); } }}var colors = new ColorGrads({ StartColor: "#fff", EndColor: "rgb(20,127,0)" }).Create();forEach(colors.concat().concat(colors.reverse()), function(x){ $("idGrads").innerHTML += "<div style=/"background-color:"+"rgb(" + x[0] + "," + x[1] + "," + x[2] + ");/"></div>";})</script><Br /><Br /><style type="text/css">#idMenu{ background:#DBDBDB;text-align:center;line-height:25px; table-layout:fixed;}#idMenu td{ cursor:pointer;}</style><table id="idMenu" width="600" border="0" cellspacing="5" cellpadding="0"> <tr> <td onclick="location.href='#'">Cropper</td> <td onclick="location.href='#'">Tween</td> <td onclick="location.href='#'">Slider</td> <td onclick="location.href='#'">Resize</td> <td onclick="location.href='#'">Drag</td> </tr></table><script>forEach($("idMenu").getElementsByTagName("td"), function(x, i){ var ct1 = new ColorTrans(x, { StartColor: "#666", EndColor: "#fff" }); var ct2 = new ColorTrans(x, { StartColor: "#f6f6f6", EndColor: "rgb(20,150,0)", CssColor: "backgroundColor" }); x.onmouseover = function(){ ct1.FadeIn(); ct2.FadeIn(); } x.onmouseout = function(){ ct1.FadeOut(); ct2.FadeOut(); }})</script><Br /><Br /><div id="idRandom" style="padding:10px;color:#fff; background-color:#CCC;">點擊隨機換顏色</div><script>var ctRandom = new ColorTrans("idRandom", { EndColor: "#CCC", CssColor: "backgroundColor" })$("idRandom").onclick = function(){ var rgb = Map([1,1,1], function(){ return Math.floor((Math.random() * 255)); } ); ctRandom.Reset({ StartColor: this.style.backgroundColor, EndColor: "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")" }) ctRandom.FadeIn();}</script></body></html>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程序設計有所幫助。
新聞熱點
疑難解答
