日期:2014-05-16  浏览次数:20362 次

JavaScript 颜色梯度和渐变效果

近来看了Dean的“Convert any colour value to hex in MSIE”,终于解决了根据关键字获取颜色rgb值的问题。
顺便把程序也重新整理一番,并使用了最近整理的工具库

?

效果预览

?

效果在线演示


?

完整实例下载

?

程序说明

【ColorGrads颜色梯度】

程序ColorGrads的作用是根据颜色集合和渐变级数生成颜色梯度集合。
渐变级数的意思是分多少步完成渐变。

网页设计中的颜色是用RGB色彩模式呈现的。
在这个模式中每种颜色可以用三个代表红(r)、绿(g)、蓝(b)的颜色值(0到255)来表示。

w3c的Colors部分看到标准中颜色的表示形式包括:
关键字形式:
em { color: red }
RGB形式:
em { color: #f00 }
em { color: #ff0000 }
em { color: rgb(255, 0, 0) }
em { color: rgb(100%, 0%, 0%) }
以上都是表示同一种颜色(红色)。
关键字形式就是用关键字代表颜色值。
而RGB形式,前两种用的比较多,都是一个"#"后面带16进制表示的颜色值,第三种是用十进制的颜色值,第四种是实际值跟255的百分比形式。

各个浏览器对各种颜色表示形式的获取并不相同:

"color: red"形式:
? ie opera ff chrome/safari
style red red #ff0000 red
currentStyle red "red" ? ?
getComputedStyle ? #ff0000 rgb(255, 0, 0) rgb(255, 0, 0)
"color: #ff0000"/"color: #f00"形式:
? ie opera ff chrome/safari
style #ff0000/#f00 #ff0000 rgb(255, 0, 0) rgb(255, 0, 0)
currentStyle #ff0000/#f00 #ff0000 ? ?
getComputedStyle ? #ff0000 rgb(255, 0, 0) rgb(255, 0, 0)
"color: rgb(255, 0, 0)"/"color: rgb(100%, 0%, 0%)"形式:
? ie opera ff chrome/safari
style rgb(255,0,0) #ff0000 rgb(255, 0, 0) rgb(255, 0, 0)
currentStyle rgb(255,0,0) #ff0000 ? ?
getComputedStyle ? #ff0000 rgb(255, 0, 0) rgb(255, 0, 0)

基本上得到的值还是按标准的形式显示的,只是有些会自动转换形式。
不过ie的rgb形式跟ff/chrome/safari的不同,数值之间并没有空格。
要特别注意的是opera用currentStyle获取关键字形式得到的颜色值是带双引号的,十分奇怪,要尽量避免使用。

要获取两种颜色的渐变梯度,先要把颜色转化成能用来计算的数值。
GetColor和GetData程序就是用来把符合w3c标准表示的颜色值转化成组合该颜色的红(r)、绿(g)、蓝(b)的颜色数值。
RGB形式的值本身就已经带了rgb的具体数值,只要用正则把值提取出来再转化就可以了。
这个过程在GetData中进行:

function?GetData(color)?{
????
var?re?=?RegExp;
????
if?(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.test(color))?{
????????
//#rrggbb
????????return?$$A.map([?re.$1,?re.$2,?re.$3?],?function(x){
????????????????
return<