JavaScript 颜色梯度和渐变效果(上)

程序说明
程序ColorGrads的作用是通过StartColor和EndColor生成颜色梯度集合。
颜色都可以用红三个颜色来表示。
程序中先通过GetColor把一般的颜色表示形式转化成一个用红三个颜色值作元素的集合。
那就首先要知道有什么颜色表示形式,从w3c的Colors部分可以知道有以下形式:
关键词模式: em { color: red } RGB颜色模式: em { color: #f00 } em {
color: #ff0000 } em { color: rgb } em { color: rgb }
以上都是表示同一种颜色。
获取颜色属性的形式在ie和ff并不同,ff统一返回RGB颜色模式的第三种形式,ie则按照设置时的形式返回。
先说说RGB颜色模式,前两种比较常用应该都明白他们的区别吧,它用的是16进制表示形式,而我们想要10进制的。
把一个16进制表示的字符转成10进制数字,一般用parseInt,在substr截取字符之后就可以用parseInt转换。
对于#ff0000这个形式可以这样转换: 复制代码 代码如下:return Map, color.substr,
color.substr{ return parseInt
parseInt的第二个参数就是第一个参数的进制值。
对于#f00形式,跟上一个差不多,只是转换之前要先换成完整表示形式: 复制代码 代码如下:return Map, color.substr,
color.substr{ return
parseInt后面两种可能用的就比较少了,一个用10进制的rgb颜色值表示,另一个用百分比来表示。
ff严格按照那样的格式来表示,而ie就“放松”很多,例如:
ie可以允许数字百分比混用,ff不可以;
ff必须有逗号分隔,ie可以只用空格分隔;
当然我们使用时最好是按照w3c的标准来设置了。 ps:那个DHTML 手册上写的 EM
{ color: rgb 1.0 0.0 0.0 } 根本不能用的,不要被误导了。
对这个形式,程序用正则取得数值,如果有%就根据百分比计算出对应数值:
复制代码 代码如下:return Map(color.match,
function{ return parseInt > 0 ? parseFloat * 2.55 : x, 10); } )
而关键词大家都很熟悉,要转化却很麻烦,因为没有一定规律只能一个一个对应:
复制代码 代码如下:var mapping =
{“red”:”#FF0000″};//略 color = mapping[color.toLowerCase{ return Map,
color.substr, color.substr{ return parseInt
}在Create创建颜色集合程序中获得开始颜色和结束颜色的数据后,再根据Step就可以获得步长了:复制代码 代码如下:startColor = this.GetColor,
endColor = this.GetColor, 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 +=
stepR; g += stepG; b += stepB; } colors.push;
正确的颜色值是在0到255之间的,而且是不带小数的,所以最好修正一下: 复制代码 代码如下:return Map{ return Map{
return Math.min(Math.max, 255); });}); 123下一页阅读全文

帮客之家(www.Bkjia.com)教程
很久没写文章,太忙了。没什么时间写复杂的东西,重新把颜色渐变效果写一遍。关于颜色的效果一般就两个,颜色梯度变化和样式的颜色渐变,前者在ie中一般用滤镜实现。

<!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>

</head>
<body>
<style type="text/css">
#idGrads{}
#idGrads div{ font-size:0;height:1px;}
</style>
<div id="idGrads"> </div>

<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>

<Br />
<Br />
<div id="idRandom" style="padding:10px;color:#fff; background-color:#CCC;">点击随机换颜色</div>

</body>
</html><br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.bkjia.com/' title="bkjia.com" target='_blank'>http://www.bkjia.com/</a></center>

提示:可修改后代码再运行!

**程序说明

【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这个形式可以这样转换:
return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5,
2)],
       function(x){ return parseInt(x, 16); }
)
parseInt的第二个参数就是第一个参数的进制值。
对于#f00形式,跟上一个差不多,只是转换之前要先换成完整表示形式:
return Map([color.substr(1, 1), color.substr(2, 1), color.substr(3,
1)],
       function(x){ return parseInt(x + x, 16); }
)

后面两种可能用的就比较少了,一个用10进制的rgb颜色值表示,另一个用百分比来表示。
ff严格按照那样的格式来表示,而ie就“放松”很多,例如:
ie可以允许数字百分比混用,ff不可以;
ff必须有逗号分隔,ie可以只用空格分隔;
当然我们使用时最好是按照w3c的标准来设置了。
ps:那个DHTML 手册上写的 EM { color: rgb 1.0 0.0 0.0 }
根本不能用的,不要被误导了。
对这个形式,程序用正则取得数值,如果有%就根据百分比计算出对应数值:
return Map(color.match(/\d+(\.\d+)?\%?/g),
       function(x){ return parseInt(x.indexOf(“%”) > 0 ?
parseFloat(x, 10) * 2.55 : x, 10); }
)

而关键词大家都很熟悉,要转化却很麻烦,因为没有一定规律只能一个一个对应:
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); }
       )
}

在Create创建颜色集合程序中获得开始颜色和结束颜色的数据后,再根据Step(多少步)就可以获得步长了:
startColor = this.GetColor(this.StartColor),
endColor = this.GetColor(this.EndColor),
stepR = (endColor[0]www.hj8828.com, – 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);

正确的颜色值是在0到255之间的,而且是不带小数的,所以最好修正一下:
return Map(colors, function(x){ return Map(x, function(x){
       return Math.min(Math.max(0, Math.floor(x)), 255);
});});

【ColorTrans颜色渐变】