JavaScript 颜色梯度和渐变效果(5)

http://www.itjxue.com  2015-08-06 23:11  来源:未知  点击次数: 

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);
  }
};

(责任编辑:IT教学网)

更多

推荐Javascript/Ajax文章