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); } };
下载完整实例
原文:http://www.cnblogs.com/cloudgamer/
本文链接:http://www.blueidea.com/tech/web/2009/6735.asp
出处:cloudgamer
责任编辑:bluehearts
上一页 JavaScript 颜色梯度和渐变效果 [4] 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|