在Create创建颜色集合程序中获得开始颜色和结束颜色的数据后,再根据Step(多少步)就可以获得步长了:
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);
正确的颜色值是在0到255之间的,而且是不带小数的,所以最好修正一下
return Map(colors, function(x){ return Map(x, function(x){ return Math.min(Math.max(0, Math.floor(x)), 255); });});
【ColorTrans颜色渐变】
有了颜色梯度集合,只需要设个定时器把集合的值依次显示就是一个渐变效果了。 这个渐变一般是分两个步骤,分别是(FadeIn)和渐出(FadeOut)。 原理就是通过改变_index集合索引,渐入时逐渐变大,渐出时逐渐变小:
//颜色渐入 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设置样式程序中,通过CssColor来设置要修改的样式属性,例如字体颜色是"color",背景色是"backgroundColor":
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] + ")";
由于颜色集合是根据开始颜色、结束颜色和步数生成的,所以如果要修改这些属性必须重新生成过集合。 Reset程序就是用来修改这些属性并重新生成集合的,集合重新生成后索引也要设回0:
//修改颜色后必须重新获取颜色集合 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;
出处:cloudgamer
责任编辑:bluehearts
上一页 JavaScript 颜色梯度和渐变效果 [2] 下一页 JavaScript 颜色梯度和渐变效果 [4]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|