程序说明
【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); } ) }
出处:cloudgamer
责任编辑:bluehearts
上一页 JavaScript 颜色梯度和渐变效果 [1] 下一页 JavaScript 颜色梯度和渐变效果 [3]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|