【ColorTrans颜色渐变】
有了颜色梯度集合,只需要设个定时器把集合的值依次显示就是一个渐变效果了。 这个渐变有两种效果:颜色渐入(transIn)和颜色渐出(transOut)。 原理就是通过改变_index集合索引属性,渐入时逐渐变大,渐出时逐渐变小:
transIn: function() { this.stop(); this._index++; this._set(); if(this._index < this._colors.length - 1){ this._timer = setTimeout($$F.bind( this.transIn, this ), this.speed); } }, transOut: function() { this.stop(); this._index--; this._set(); if(this._index > 0){ this._timer = setTimeout($$F.bind( this.transOut, this ), this.speed); } },
在_set设置样式程序中修改样式:
var color = this._colors[Math.min(Math.max(0, this._index), this._colors.length - 1)]; this._elem.style[this.style] = "rgb(" + color.join(",") + ")";
其中style属性是要修改的样式属性名,例如颜色是"color",背景色是"backgroundColor"。
由于颜色集合是根据开始颜色、结束颜色和步数生成的,所以如果要修改这些属性必须重新生成过集合。
reset程序就是用来重新生成集合的,同时索引也会设回0:
this._options = options = $$.extend(this._options, options || {}); this._colors = ColorGrads( [options.from, options.to], options.step ); this._index = 0;
程序初始化的时候也会reset一次:
this.reset({ from: this.options.from || $$D.getStyle(this._elem, this.style), to: this.options.to, step: Math.abs(this.options.step) });
如果没有自定义from颜色的话会自动获取当前颜色。
出处:蓝色理想
责任编辑:bluehearts
上一页 JavaScript颜色梯度和渐变效果改进 [3] 下一页 JavaScript颜色梯度和渐变效果改进 [5]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|