JavaScript 颜色梯度和渐变效果- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript 颜色梯度和渐变效果

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

Javascript 中的 JavaScript 颜色梯度和渐变效果

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 247 ::

收藏到网摘: n/a

自动完成JS类(纯JS, Ajax模式) IE6与IE7中，innerHTML获取param的区别

程序ColorGrads的作用是通过StartColor和EndColor生成颜色梯度集合。程序说明
【ColorGrads颜色梯度】
程序ColorGrads的作用是通过StartColor和EndColor生成颜色梯度集合。
颜色都可以用红(r)、绿(g)、蓝(b)三个颜色来表示。
程序中先通过GetColor把一般的颜色表示形式转化成一个用红(r)、绿(g)、蓝(b)三个颜色值作元素的集合。
那就首先要知道有什么颜色表示形式，从w3c的Colors部分可以知道有以下形式：
关键词模式：
em { color: red }
RGB颜色模式：
em { color: #f00 }
em { color: #ff0000 }
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }
以上都是表示同一种颜色（红色）。
获取颜色属性的形式在ie和ff并不同，ff统一返回RGB颜色模式的第三种形式，ie则按照设置时的形式返回。
先说说RGB颜色模式，前两种比较常用应该都明白他们的区别吧，它用的是16进制表示形式，而我们想要10进制的。
把一个16进制表示的字符转成10进制数字，一般用parseInt，在substr截取字符之后就可以用parseInt转换。
对于#ff0000这个形式可以这样转换：

复制代码代码如下:
【ColorTrans颜色渐变】
有了颜色梯度集合，只需要设个定时器把集合的值依次显示就是一个渐变效果了。
这个渐变一般是分两个步骤，分别是（FadeIn）和渐出（FadeOut）。
原理就是通过改变_index集合索引，渐入时逐渐变大，渐出时逐渐变小：

复制代码代码如下:
ColorTrans部分：

复制代码代码如下:

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"//设置属性（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); 
} 
}; 

点击运行可以看到效果:

<!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[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"//设置属性（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='http://www.cnblogs.com/cloudgamer/archive/2008/07/21/ImgCropper.html'">Cropper</td> <td onclick="location.href='http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html'">Tween</td> <td onclick="location.href='http://www.cnblogs.com/cloudgamer/archive/2008/12/24/Slider.html'">Slider</td> <td onclick="location.href='http://www.cnblogs.com/cloudgamer/archive/2008/12/03/Resize.html'">Resize</td> <td onclick="location.href='http://www.cnblogs.com/cloudgamer/archive/2008/11/17/Drag.html'">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>

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

自动完成JS类(纯JS, Ajax模式) IE6与IE7中，innerHTML获取param的区别

Javascript 中的 JavaScript 颜色梯度和渐变效果

评论 (0) All