使用技巧
在颜色渐变菜单中,并没有使用链接标签a,原因是a的伪类的颜色并不能直接用js来修改(除非改class)。暂时没想到很好的方法,只好用onclick跳转代替了。
在测试过程中还发现一个关于数组的问题,在ie和ff运行alert([,,].length)会分别显示3和2。最后一个元素不写的话ff就会忽略这个元素,只要写的话就不会忽略即使是undefined和null,看了下文档也找到原因。所以这个情况还是插一个东西进去,觉得不好看就new Array好了。
测试中还发现chrome(1.0.154.48)的map一个问题,map是js1.6的Array的方法,ff和chrome都支持(具体看这里)。在ff中[,,1].map(function(){return 0})返回的是[0,0,0],但chrome却返回[,,0]。即在chrome中如果元素是空(不包括null和undefined)的话就一律返回空,用new Array来创建也一样。感觉这样不太合理,应该以后会改进吧。
使用说明
ColorGrads只有3个属性设置: StartColor: "#fff",//开始颜色 EndColor: "#000",//结束颜色 Step: 20//渐变级数 设置好属性后用Create生成集合就行了。
ColorTrans只要一个参数,要实现渐变的对象,可设置以下属性: StartColor: "",//开始颜色 EndColor: "#000",//结束颜色 Step: 20,//渐变级数 Speed: 20,//渐变速度 CssColor: "color"//设置属性(Scripting属性) 如果不设置StartColor会自动使用CurrentStyle获取的样式值。 其中StartColor、EndColor和Step在实例化后要重新设置的话需要用Reset来设置。
具体使用请参考实例。
程序代码
ColorGrads部分:
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); } ) } } } };
出处:cloudgamer
责任编辑:bluehearts
上一页 JavaScript 颜色梯度和渐变效果 [3] 下一页 JavaScript 颜色梯度和渐变效果 [5]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|