JavaScript html js颜色梯度和渐变效果,非常不错的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=gb2312" /><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 = source;}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, 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 - startColor) / this.Step,stepG = (endColor - startColor) / this.Step,stepB = (endColor - startColor) / this.Step;//生成颜色集合for(var i = 0, n = this.Step, r = startColor, g = startColor, b = startColor; i < n; i++){colors.push(); 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(/^#{6}$/i.test(color)){//#rrggbbreturn Map(,function(x){ return parseInt(x, 16); })}else if(/^#{3}$/i.test(color)){//#rgbreturn Map(,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{//colorvar mapping = {"red":"#FF0000"};//略color = mapping;if(color){return Map(,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._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"//设置属性（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;this._obj.style = "rgb(" + color + "," + color + "," + color + ")";},//停止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, 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 + "," + x + "," + x + ");\"></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 >黑色头发</td><td >紫色头发</td><td >黑色头发</td><td >紫色头发</td><td >黑色头发</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(, function(){ return Math.floor((Math.random() * 255)); } );ctRandom.Reset({ StartColor: this.style.backgroundColor, EndColor: "rgb(" + rgb + "," + rgb + "," + rgb + ")" })ctRandom.FadeIn();}</script></body></html>转自:http://www.cnblogs.com/cloudgamer/default.html?OnlyTitle=1
黑色头发:http://heisetoufa.iteye.com/
页:
[1]