JS技术

JavaScript 颜色梯度和渐变效果实例教程_Javascript教程(2)

字号+ 作者:H5之家 来源:H5之家 2015-10-02 18:00 我要评论( )

var color = this._colors[Math.min(Math.max(0, this._index), this._colors.length - 1)]; this._obj.style[this.CssColor] = rgb( + color[0] + , + color[1] + , + color[2] + ); 由于颜色集合是根据开始颜色、

var color = this._colors[Math.min(Math.max(0, this._index), this._colors.length - 1)];
this._obj.style[this.CssColor] = "rgb(" + color[0] + "," + color[1] + "," + color[2] + ")";

由于颜色集合是根据开始颜色、结束颜色和步数生成的,所以如果要修改这些属性必须重新生成过集合。
Reset程序就是用来修改这些属性并重新生成集合的,集合重新生成后索引也要设回0:

//修改颜色后必须重新获取颜色集合
color = Extend({ StartColor: this._startColor, EndColor: this._endColor, Step: this._step }, color || {});
//设置属性
this._grads.StartColor = this._startColor = color.StartColor;
this._grads.EndColor = this._endColor = color.EndColor;
this._grads.Step = this._step = color.Step;
//获取颜色集合
this._colors = this._grads.Create();
this._index = 0; 

使用技巧

在颜色渐变菜单中,并没有使用链接标签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); }
            )
        }
    }
  }
}; 

ColorTrans部分:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JavaScript入门教程(二)_javascript教程教程

    JavaScript入门教程(二)_javascript教程教程

    2015-10-10 14:25

  • JavaScript入门教程(五)_javascript教程教程

    JavaScript入门教程(五)_javascript教程教程

    2015-10-10 14:21

  • JavaScript入门教程(四)_javascript教程教程

    JavaScript入门教程(四)_javascript教程教程

    2015-10-10 14:19

  • JavaScript入门教程(三)_javascript教程教程

    JavaScript入门教程(三)_javascript教程教程

    2015-10-10 14:17

网友点评