中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

在Create創(chuàng)建顏色集合程序中獲得開(kāi)始顏色和結(jié)束顏色的數(shù)據(jù)后，再根據(jù)Step（多少步）就可以獲得步長(zhǎng)了：

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;

再根據(jù)步長(zhǎng)生成集合：

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之間的，而且是不帶小數(shù)的，所以最好修正一下

return Map(colors, function(x){ return Map(x, function(x){
    return Math.min(Math.max(0, Math.floor(x)), 255);
});});

【ColorTrans顏色漸變】

有了顏色梯度集合，只需要設(shè)個(gè)定時(shí)器把集合的值依次顯示就是一個(gè)漸變效果了。
這個(gè)漸變一般是分兩個(gè)步驟，分別是（FadeIn）和漸出（FadeOut）。
原理就是通過(guò)改變_index集合索引，漸入時(shí)逐漸變大，漸出時(shí)逐漸變�。�

  //顏色漸入
  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設(shè)置樣式程序中，通過(guò)CssColor來(lái)設(shè)置要修改的樣式屬性，例如字體顏色是"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] + ")";

由于顏色集合是根據(jù)開(kāi)始顏色、結(jié)束顏色和步數(shù)生成的，所以如果要修改這些屬性必須重新生成過(guò)集合。
Reset程序就是用來(lái)修改這些屬性并重新生成集合的，集合重新生成后索引也要設(shè)回0：

//修改顏色后必須重新獲取顏色集合
color = Extend({ StartColor: this._startColor, EndColor: this._endColor, Step: this._step }, color || {});
//設(shè)置屬性
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
責(zé)任編輯：bluehearts

上一頁(yè) JavaScript 顏色梯度和漸變效果 [2] 下一頁(yè) JavaScript 顏色梯度和漸變效果 [4]

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。