|
使用技巧
在顏色漸變菜單中，并沒(méi)有使用鏈接標(biāo)簽a，原因是a的偽類的顏色并不能直接用js來(lái)修改（除非改class）。暫時(shí)沒(méi)想到很好的方法，只好用onclick跳轉(zhuǎn)代替了。
在測(cè)試過(guò)程中還發(fā)現(xiàn)一個(gè)關(guān)于數(shù)組的問(wèn)題，在ie和ff運(yùn)行alert([,,].length)會(huì)分別顯示3和2。最后一個(gè)元素不寫的話ff就會(huì)忽略這個(gè)元素，只要寫的話就不會(huì)忽略即使是undefined和null，看了下文檔也找到原因。所以這個(gè)情況還是插一個(gè)東西進(jìn)去，覺(jué)得不好看就new Array好了。
測(cè)試中還發(fā)現(xiàn)chrome(1.0.154.48)的map一個(gè)問(wèn)題，map是js1.6的Array的方法，ff和chrome都支持（具體看這里）。在ff中[,,1].map(function(){return 0})返回的是[0,0,0]，但chrome卻返回[,,0]。即在chrome中如果元素是空(不包括null和undefined)的話就一律返回空，用new Array來(lái)創(chuàng)建也一樣。感覺(jué)這樣不太合理，應(yīng)該以后會(huì)改進(jìn)吧。
使用說(shuō)明
ColorGrads只有3個(gè)屬性設(shè)置：
StartColor: "#fff",//開(kāi)始顏色
EndColor: "#000",//結(jié)束顏色
Step: 20//漸變級(jí)數(shù)
設(shè)置好屬性后用Create生成集合就行了。
ColorTrans只要一個(gè)參數(shù)，要實(shí)現(xiàn)漸變的對(duì)象，可設(shè)置以下屬性：
StartColor: "",//開(kāi)始顏色
EndColor: "#000",//結(jié)束顏色
Step: 20,//漸變級(jí)數(shù)
Speed: 20,//漸變速度
CssColor: "color"http://設(shè)置屬性（Scripting屬性）
如果不設(shè)置StartColor會(huì)自動(dòng)使用CurrentStyle獲取的樣式值。
其中StartColor、EndColor和Step在實(shí)例化后要重新設(shè)置的話需要用Reset來(lái)設(shè)置。
具體使用請(qǐng)參考實(shí)例。
程序代碼
ColorGrads部分：
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",//開(kāi)始顏色
EndColor: "#000",//結(jié)束顏色
Step: 20//漸變級(jí)數(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); }
)
}
}
}
};
出處：cloudgamer
責(zé)任編輯：bluehearts
上一頁(yè) JavaScript 顏色梯度和漸變效果 [3] 下一頁(yè) JavaScript 顏色梯度和漸變效果 [5]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 4 頁(yè) JavaScript 顏色梯度和漸變效果 [4]
