快捷導(dǎo)航

JavaScript 顏色梯度和漸變效果第2/3頁

更新時間：2009年03月15日 21:15:07 作者：

程序ColorGrads的作用是通過StartColor和EndColor生成顏色梯度集合。

【ColorTrans顏色漸變】

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

復(fù)制代碼代碼如下:

//顏色漸入 
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è)置樣式程序中，通過CssColor來設(shè)置要修改的樣式屬性，例如字體顏色是"color"，背景色是"backgroundColor"：

復(fù)制代碼代碼如下:

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ù)開始顏色、結(jié)束顏色和步數(shù)生成的，所以如果要修改這些屬性必須重新生成過集合。
Reset程序就是用來修改這些屬性并重新生成集合的，集合重新生成后索引也要設(shè)回0：

復(fù)制代碼代碼如下:

//修改顏色后必須重新獲取顏色集合 
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; 

使用技巧
在顏色漸變菜單中，并沒有使用鏈接標(biāo)簽a，原因是a的偽類的顏色并不能直接用js來修改（除非改class）。
暫時沒想到很好的方法，只好用onclick跳轉(zhuǎn)代替了。
在測試過程中還發(fā)現(xiàn)一個關(guān)于數(shù)組的問題，在ie和ff運(yùn)行alert([,,].length)會分別顯示3和2。
最后一個元素不寫的話ff就會忽略這個元素，只要寫的話就不會忽略即使是undefined和null，看了下文檔也找到原因。
所以這個情況還是插一個東西進(jìn)去，覺得不好看就new Array好了。
測試中還發(fā)現(xiàn)chrome(1.0.154.48)的map一個問題，map是js1.6的Array的方法，ff和chrome都支持（具體看這里）。
在ff中[,,1].map(function(){return 0})返回的是[0,0,0]，但chrome卻返回[,,0]。
即在chrome中如果元素是空(不包括null和undefined)的話就一律返回空，用new Array來創(chuàng)建也一樣。
感覺這樣不太合理，應(yīng)該以后會改進(jìn)吧。
使用說明

復(fù)制代碼代碼如下:

ColorGrads只有3個屬性設(shè)置： 
StartColor: "#fff",//開始顏色 
EndColor: "#000",//結(jié)束顏色 
Step: 20//漸變級數(shù) 
設(shè)置好屬性后用Create生成集合就行了。 

ColorTrans只要一個參數(shù)，要實(shí)現(xiàn)漸變的對象，可設(shè)置以下屬性： 
StartColor: "",//開始顏色 
EndColor: "#000",//結(jié)束顏色 
Step: 20,//漸變級數(shù) 
Speed: 20,//漸變速度 
CssColor: "color"http://設(shè)置屬性（Scripting屬性） 
如果不設(shè)置StartColor會自動使用CurrentStyle獲取的樣式值。 
其中StartColor、EndColor和Step在實(shí)例化后要重新設(shè)置的話需要用Reset來設(shè)置。

程序代碼
ColorGrads部分：

復(fù)制代碼代碼如下:

var ColorGrads = function(options){ 
this.SetOptions(options); 
this.StartColor = this.options.StartColor; 
this.EndColor = this.options.EndColor; 
this.Step = Math.abs(this.options.Step); 
}; 
ColorGrads.prototype = { 
//設(shè)置默認(rèn)屬性 
SetOptions: function(options) { 
this.options = {//默認(rèn)值 
StartColor: "#fff",//開始顏色 
EndColor: "#000",//結(jié)束顏色 
Step: 20//漸變級數(shù) 
}; 
Extend(this.options, options || {}); 
}, 
//獲取漸變顏色集合 
Create: function() { 
var colors = [], 
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); 
//修正顏色值 
return Map(colors, function(x){ return Map(x, function(x){ 
return Math.min(Math.max(0, Math.floor(x)), 255); 
});}); 
}, 
//獲取顏色數(shù)據(jù) 
GetColor: function(color) { 
if(/^#[0-9a-f]{6}$/i.test(color)) 
{//#rrggbb 
return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)], 
function(x){ return parseInt(x, 16); } 
) 
} 
else if(/^#[0-9a-f]{3}$/i.test(color)) 
{//#rgb 
return Map([color.substr(1, 1), color.substr(2, 1), color.substr(3, 1)], 
function(x){ return parseInt(x + x, 16); } 
) 
} 
else if(/^rgb(.*)$/i.test(color)) 
{//rgb(n,n,n) or rgb(n%,n%,n%) 
return Map(color.match(/\d+(\.\d+)?\%?/g), 
function(x){ return parseInt(x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x, 10); } 
) 
} 
else 
{//color 
var mapping = {"red":"#FF0000"};//略 
color = mapping[color.toLowerCase()]; 
if(color){ 
return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)], 
function(x){ return parseInt(x, 16); } 
) 
} 
} 
} 
}; 