JavaScript 颜色梯度和渐变效果

清醒时做事，糊涂时读书，大怒时睡觉，无聊时关注为大家准备的精彩内容。下面为大家推荐JavaScript 颜色梯度和渐变效果，无聊中的都看过来。

很久没写blog，太忙了。没什么时间写复杂的东西，重新把颜色渐变效果写一遍。

关于颜色的效果一般就两个，颜色梯度变化和样式的颜色渐变，前者在ie中一般用滤镜实现。

实例效果

预览效果1：

这是一个颜色梯度变化演示：

运行代码框

!DOCTYPE html public "-//W3C//DTDXHTML1.0 Transitional//EN" "& id="Head"titleJavaScript颜色梯度和渐变效果/titlemeta http-equiv="Content-Type" content="text/html; charset=utf-8" //headbodyscript type="text/javascript"!--var $ = function (id) {return "string" == typeof 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 = ; i len; i++) { ((thisObject, array[i], i, array)); }return res;}}var ColorGrads = function(options){() = = = ()} = {//设置默认属性SetOptions: function(options) { = {//默认值StartColor:"#fff",//开始颜色EndColor:"#000",//结束颜色渐变级数}(, options || {});},//获取渐变颜色集合Create: function() {var colors = [],startColor = (), = (), = (endColor[0] - startColor[0]) / , = (endColor[1] - startColor[1]) / , = (endColor[2] - startColor[2]) / 生成颜色集合(var i = 0, n = , r = startColor[0], g = startColor[1], b = startColor[2]; i n; i++){([r, g, b]); r += stepR; g += stepG; b += stepB;}(endColor);//修正颜色值return Map(colors, function(x){ return Map(x, function(x){return Math.min(Math.max(0, ()), 255);});});},//获取颜色数据GetColor: function(color) {if(/^#[0-9a-f]{6}$/()){//#rrggbbreturn Map([(1, 2), (3, 2), (5, 2)],function(x){ return parseInt(x, 16); })}else if(/^#[0-9a-f]{3}$/()){//#rgbreturn Map([(1, 1), (2, 1), (3, 1)],function(x){ return parseInt(x + x, 16); })}else if(/^rgb(.*)$/()){//rgb(n,n,n) or rgb(n%,n%,n%)return Map((+(+)？%？),(){ return parseInt((&%&) 0 ？ parseFloat(x, 10) * 2.55 : x, 10); })}else{//colorvar mapping = {"red":"#FF0000"};//略color = mapping[()(){ Map([(1, 2), (3, 2), (5, 2)],function(x){ return parseInt(x, 16); })}}}};var CurrentStyle = function(element){return || (element, null);}var Bind = function(object, fun) {var args = ()() function() {return (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(.Speed);this.CssColor = .CssColor;this._startColor = .StartColor || CurrentStyle(this._obj)[this.CssColor];this._endColor = .EndColor;this._step = Math.abs(.Step);this.Reset();this.SetColor();};ColorTrans.prototype = {//设置默认属性SetOptions: function(options) { = {//默认值StartColor:"",//开始颜色EndColor:"#000",//结束颜色Step:20,//渐变级数Speed:20,//渐变速度CssColor:"color"//设置属性（Scripting属性）};Extend(, 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._index-1 ; 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/pp预览效果1：/pp这是一个颜色梯度变化演示：/ppstyle type="text/css"!--#idGrads{}#idGrads div{ font-size:0;height:1px;}--/style/pdiv id="idGrads"/divpscript type="text/javascript"!--var forEach = function(array, callback, thisObject){if(array.forEach){array.forEach(callback, thisObject);}else{for (var i = 0, len = ; i len; i++) { (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 st"+"yle="background-color:"+"rgb(" + x[0] + "," + x[1] + "," + x[2] + ");"/div";})// --/script/p/body/html

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

预览效果2：

一个颜色渐变的菜单：

运行代码框

!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "& id="Head"titleJavaScript 颜色梯度和渐变效果/titlemeta http-equiv="Content-Type" content="text/html; charset=utf-8" /meta id="metaKeywords" name="keywords" content="渐变,颜色,color,梯度,Grads,JavaScript 颜色梯度和渐变效果" /meta name="description" content="很久没写blog，太忙了。没什么时间写复杂的东西，重新把颜色渐变效果写一遍。关于颜色的效果一般就两个，颜色梯度变化和样式的颜色渐变，前者在ie中一般用滤镜实现。实例效果0？parseFloat(x,10)*2.55:x,10);})}else" /meta name="description" content=",JavaScript,js,cloudgamer,web,html,css,特效,代码,效果" /link id="CommondCss" type="text/css" rel="stylesheet" href="/css/common.css" /link id="CommondCss2" type="text/css" rel="stylesheet" href="/css/common2.css" /link type="text/css" rel="stylesheet" href="/css/shCore.css" /link type="text/css" rel="stylesheet" href="/css/shThemeDefault.css" /link id="SecondaryCss" type="text/css" rel="stylesheet" href="/cloudgamer/customcss.aspx" /link id="RSSLink" title="RSS" type="application/rss+xml" rel="alternate" href="/cloudgamer/rss" /link id="RSDLink" title="RSD" type="application/rsd+xml" rel="EditURI" href="/cloudgamer/rsd.xml" /script src="/Script/common.js" type="text/javascript"/script/headbodypscript type="text/javascript"!--var $ = function (id) {return "string" == typeof 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 = ; i len; i++) { ((thisObject, array[i], i, array)); }return res;}}var ColorGrads = function(options){() = = = ()} = {//设置默认属性SetOptions: function(options) { = {//默认值StartColor:"#fff",//开始颜色EndColor:"#000",//结束颜色渐变级数}(, options || {});},//获取渐变颜色集合Create: function() {var colors = [],startColor = (), = (), = (endColor[0] - startColor[0]) / , = (endColor[1] - startColor[1]) / , = (endColor[2] - startColor[2]) / 生成颜色集合(var i = 0, n = , r = startColor[0], g = startColor[1], b = startColor[2]; i n; i++){([r, g, b]); r += stepR; g += stepG; b += stepB;}(endColor);//修正颜色值return Map(colors, function(x){ return Map(x, function(x){return Math.min(Math.max(0, ()), 255);});});},//获取颜色数据GetColor: function(color) {if(/^#[0-9a-f]{6}$/()){//#rrggbbreturn Map([(1, 2), (3, 2), (5, 2)],function(x){ return parseInt(x, 16); })}else if(/^#[0-9a-f]{3}$/()){//#rgbreturn Map([(1, 1), (2, 1), (3, 1)],function(x){ return parseInt(x + x, 16); })}else if(/^rgb(.*)$/()){//rgb(n,n,n) or rgb(n%,n%,n%)return Map((+(+)？%？),(){ return parseInt((&%&) 0 ？ parseFloat(x, 10) * 2.55 : x, 10); })}else{//colorvar mapping = {"red":"#FF0000"};//略color = mapping[()(){ Map([(1, 2), (3, 2), (5, 2)],function(x){ return parseInt(x, 16); })}}}};var CurrentStyle = function(element){return || (element, null);}var Bind = function(object, fun) {var args = ()() function() {return (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(.Speed);this.CssColor = .CssColor;this._startColor = .StartColor || CurrentStyle(this._obj)[this.CssColor];this._endColor = .EndColor;this._step = Math.abs(.Step);this.Reset();this.SetColor();};ColorTrans.prototype = {//设置默认属性SetOptions: function(options) { = {//默认值StartColor:"",//开始颜色EndColor:"#000",//结束颜色Step:20,//渐变级数Speed:20,//渐变速度CssColor:"color"//设置属性（Scripting属性）};Extend(, 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._index-1 ; 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/ppscript type="text/javascript"!--var forEach = function(array, callback, thisObject){if(array.forEach){array.forEach(callback, thisObject);}else{for (var i = 0, len = ; i len; i++) { (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 st"+"yle="background-color:"+"rgb(" + x[0] + "," + x[1] + "," + x[2] + ");"/div";})// --/script/ppbr /预览效果2：/pp一个颜色渐变的菜单：/ppstyle type="text/css"!--#idMenu{ background:#DBDBDB;text-align:center;line-height:25px; table-layout:fixed;}#idMenu td{ cursor:pointer;}--/style/ptable border="0" width="600" cellpadding="0" cellspacing="5" id="idMenu"tbodytrtd onclick="location.href="/cloudgamer/archive//07/21/ImgCropper.html""Cropper/tdtd onclick="location.href="/cloudgamer/archive//01/06/Tween.html""Tween/tdtd onclick="location.href="/cloudgamer/archive//12/24/Slider.html""Slider/tdtd onclick="location.href="/cloudgamer/archive//12/03/Resize.html""Resize/tdtd onclick="location.href="/cloudgamer/archive//11/17/Drag.html""Drag/td/tr/tbody/tablepscript type="text/javascript"!--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/p/body/html

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

预览效果3：

颜色渐变的有趣应用，点击随机颜色渐变：

运行代码框

!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "& id="Head"titleJavaScript 颜色梯度和渐变效果/titlemeta http-equiv="Content-Type" content="text/html; charset=utf-8" /meta id="metaKeywords" name="keywords" content="渐变,颜色,color,梯度,Grads,JavaScript 颜色梯度和渐变效果" /meta name="description" content="很久没写blog，太忙了。没什么时间写复杂的东西，重新把颜色渐变效果写一遍。关于颜色的效果一般就两个，颜色梯度变化和样式的颜色渐变，前者在ie中一般用滤镜实现。实例效果0？parseFloat(x,10)*2.55:x,10);})}else" /meta name="description" content=",JavaScript,js,cloudgamer,web,html,css,特效,代码,效果" /link id="CommondCss" type="text/css" rel="stylesheet" href="/css/common.css" /link id="CommondCss2" type="text/css" rel="stylesheet" href="/css/common2.css" /link type="text/css" rel="stylesheet" href="/css/shCore.css" /link type="text/css" rel="stylesheet" href="/css/shThemeDefault.css" /link id="SecondaryCss" type="text/css" rel="stylesheet" href="/cloudgamer/customcss.aspx" /link id="RSSLink" title="RSS" type="application/rss+xml" rel="alternate" href="/cloudgamer/rss" /link id="RSDLink" title="RSD" type="application/rsd+xml" rel="EditURI" href="/cloudgamer/rsd.xml" /script src="/Script/common.js" type="text/javascript"/script/headbodypscript type="text/javascript"!--var $ = function (id) {return "string" == typeof 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 = ; i len; i++) { ((thisObject, array[i], i, array)); }return res;}}var ColorGrads = function(options){() = = = ()} = {//设置默认属性SetOptions: function(options) { = {//默认值StartColor:"#fff",//开始颜色EndColor:"#000",//结束颜色渐变级数}(, options || {});},//获取渐变颜色集合Create: function() {var colors = [],startColor = (), = (), = (endColor[0] - startColor[0]) / , = (endColor[1] - startColor[1]) / , = (endColor[2] - startColor[2]) / 生成颜色集合(var i = 0, n = , r = startColor[0], g = startColor[1], b = startColor[2]; i n; i++){([r, g, b]); r += stepR; g += stepG; b += stepB;}(endColor);//修正颜色值return Map(colors, function(x){ return Map(x, function(x){return Math.min(Math.max(0, ()), 255);});});},//获取颜色数据GetColor: function(color) {if(/^#[0-9a-f]{6}$/()){//#rrggbbreturn Map([(1, 2), (3, 2), (5, 2)],function(x){ return parseInt(x, 16); })}else if(/^#[0-9a-f]{3}$/()){//#rgbreturn Map([(1, 1), (2, 1), (3, 1)],function(x){ return parseInt(x + x, 16); })}else if(/^rgb(.*)$/()){//rgb(n,n,n) or rgb(n%,n%,n%)return Map((+(+)？%？),(){ return parseInt((&%&) 0 ？ parseFloat(x, 10) * 2.55 : x, 10); })}else{//colorvar mapping = {"red":"#FF0000"};//略color = mapping[()(){ Map([(1, 2), (3, 2), (5, 2)],function(x){ return parseInt(x, 16); })}}}};var CurrentStyle = function(element){return || (element, null);}var Bind = function(object, fun) {var args = ()() function() {return (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(.Speed);this.CssColor = .CssColor;this._startColor = .StartColor || CurrentStyle(this._obj)[this.CssColor];this._endColor = .EndColor;this._step = Math.abs(.Step);this.Reset();this.SetColor();};ColorTrans.prototype = {//设置默认属性SetOptions: function(options) { = {//默认值StartColor:"",//开始颜色EndColor:"#000",//结束颜色Step:20,//渐变级数Speed:20,//渐变速度CssColor:"color"//设置属性（Scripting属性）};Extend(, 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._index-1 ; 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/ppbr /预览效果3：/pp颜色渐变的有趣应用，点击随机颜色渐变：/pdiv style="padding:10px;color:#fff; background-color:#CCC;" id="idRandom"点击随机换颜色/divpscript type="text/javascript"!--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/p/body/html

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]