JavaScript 颜色梯度和渐变效果（4）

程序代码

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部分：

var ColorTrans = function(obj, options){
    
    this._obj = $(obj);
    this._timer = null;//定时器
    this._index = 0;//索引
    this._colors = [];//颜色集合
    this._grads = new ColorGrads();
    
    this.SetOptions(options);
    
    this.Speed = Math.abs(this.options.Speed);
    this.CssColor = this.options.CssColor;
    
    this._startColor = this.options.StartColor || CurrentStyle(this._obj)[this.CssColor];
    this._endColor = this.options.EndColor;
    this._step = Math.abs(this.options.Step);
    
    this.Reset();
    this.SetColor();
};
ColorTrans.prototype = {
  //设置默认属性
  SetOptions: function(options) {
    this.options = {//默认值
        StartColor:    "",//开始颜色
        EndColor:    "#000",//结束颜色
        Step:        20,//渐变级数
        Speed:        20,//渐变速度
        CssColor:    "color"//设置属性（Scripting属性）
    };
    Extend(this.options, options || {});
  },
  //重设颜色集合
  Reset: function(color) {
    //修改颜色后必须重新获取颜色集合
    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;
  },
  //颜色渐入
  FadeIn: function() {
    this.Stop(); this._index++; this.SetColor();
    if(this._index < this._colors.length - 1){
        this._timer = setTimeout(Bind(this, this.FadeIn), this.Speed);
    }
  },
  //颜色渐出
  FadeOut: function() {
    this.Stop(); this._index--; this.SetColor();
    if(this._index > 0){
        this._timer = setTimeout(Bind(this, this.FadeOut), this.Speed);
    }
  },
  //颜色设置
  SetColor: function() {
    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] + ")";
  },
  //停止
  Stop: function() {
    clearTimeout(this._timer);
  }
};

在线演示页面：Color.htm