JS技术

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

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

var ColorTrans = function(obj, options){ this._obj = $(obj); this._timer = null;//定时器 this._index = 0;//索引 this._colors = [];//颜色集合 this._grads = new ColorGrads(); this.SetOptions(options);

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

 

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

网友点评