当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 利用递增的数字返回循环渐变的颜色的js代码

Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题分析
TopList标签和JavaScript结合两例
javascript-TreeView父子联动效果保持节点状态一致
不错的JS中变量相关的细节分析
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
根据地区不同显示时间的javascript代码
javascript下查找父节点的简单方法
分享别人写的一个小型js框架
封装好的省市地区联动控件附下载
权威JavaScript 中的内存泄露模式
JavaScript 编程引入命名空间的方法与代码
IE/FireFox具备兼容性的拖动代码
分析 JavaScript 中令人困惑的变量赋值
推荐一个小巧的JS日历
让回调函数 showResponse 也带上参数的代码
增强的 JavaScript 的 trim 函数的代码
高亮闪烁某个元素的js脚本
用JavaScript 处理 URL 的两个函数代码
JavaScript 模仿vbs中的 DateAdd() 函数的代码
用js实现随机返回数组的一个元素

Javascript 中的 利用递增的数字返回循环渐变的颜色的js代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 474 ::
收藏到网摘: n/a

其实很久前就想写一个这样的函数了。因为很多时候需要利用递增数字返回一个渐变颜色序列,今天终于完成了。 函数如下:
复制代码 代码如下:

function gCL(i){
var f=parseInt((i%15)/5);
i=i%15%5;
switch(f){
case 0:return "#"+cS2(255-i*51)+cS2(i*51)+"00";
case 1:return "#00"+cS2(255-i*51)+cS2(i*51);
case 2:return "#"+cS2(i*51)+"00"+cS2(255-i*51);
}
}
function cS2(i) {
var s=i.toString(16);
return ("00"+s).substr(s.length);
}

使用gCL就可以利用递增的数字返回由红到绿到蓝的渐变颜色了。渐变效果如下,共15种颜色,循环渐变:

比如下面的应用,使用这个函数可以将超级链接的背景色进行渐变:
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

这个函数加以修改还可以产生更加细致的颜色变化,有兴趣的朋友可以试试。