|
程序說明
【ColorGrads顏色梯度】
程序ColorGrads的作用是根據(jù)顏色集合和漸變級(jí)數(shù)生成顏色梯度集合。
漸變級(jí)數(shù)的意思是分多少步完成漸變。
網(wǎng)頁設(shè)計(jì)中的顏色是用RGB色彩模式呈現(xiàn)的。
在這個(gè)模式中每種顏色可以用三個(gè)代表紅(r)、綠(g)、藍(lán)(b)的顏色值（0到255）來表示。
從w3c的Colors部分看到標(biāo)準(zhǔn)中顏色的表示形式包括：
關(guān)鍵字形式：
em { color: red }
RGB形式：
em { color: #f00 }
em { color: #ff0000 }
em { color: rgb(255, 0, 0) }
em { color: rgb(100%, 0%, 0%) }
以上都是表示同一種顏色（紅色）。
關(guān)鍵字形式就是用關(guān)鍵字代表顏色值。
而RGB形式，前兩種用的比較多，都是一個(gè)"#"后面帶16進(jìn)制表示的顏色值，第三種是用十進(jìn)制的顏色值，第四種是實(shí)際值跟255的百分比形式。
各個(gè)瀏覽器對(duì)各種顏色表示形式的獲取并不相同：
| "color: red"形式： |
| |
ie |
opera |
ff |
chrome/safari |
| style |
red |
red |
#ff0000 |
red |
| currentStyle |
red |
"red" |
|
|
| getComputedStyle |
|
#ff0000 |
rgb(255, 0, 0) |
rgb(255, 0, 0) |
| "color: #ff0000"/"color: #f00"形式： |
| |
ie |
opera |
ff |
chrome/safari |
| style |
#ff0000/#f00 |
#ff0000 |
rgb(255, 0, 0) |
rgb(255, 0, 0) |
| currentStyle |
#ff0000/#f00 |
#ff0000 |
|
|
| getComputedStyle |
|
#ff0000 |
rgb(255, 0, 0) |
rgb(255, 0, 0) |
| "color: rgb(255, 0, 0)"/"color: rgb(100%, 0%, 0%)"形式： |
| |
ie |
opera |
ff |
chrome/safari |
| style |
rgb(255,0,0) |
#ff0000 |
rgb(255, 0, 0) |
rgb(255, 0, 0) |
| currentStyle |
rgb(255,0,0) |
#ff0000 |
|
|
| getComputedStyle |
|
#ff0000 |
rgb(255, 0, 0) |
rgb(255, 0, 0) |
基本上得到的值還是按標(biāo)準(zhǔn)的形式顯示的，只是有些會(huì)自動(dòng)轉(zhuǎn)換形式。
不過ie的rgb形式跟ff/chrome/safari的不同，數(shù)值之間并沒有空格。
要特別注意的是opera用currentStyle獲取關(guān)鍵字形式得到的顏色值是帶雙引號(hào)的，十分奇怪，要盡量避免使用。
要獲取兩種顏色的漸變梯度，先要把顏色轉(zhuǎn)化成能用來計(jì)算的數(shù)值。
GetColor和GetData程序就是用來把符合w3c標(biāo)準(zhǔn)表示的顏色值轉(zhuǎn)化成組合該顏色的紅(r)、綠(g)、藍(lán)(b)的顏色數(shù)值。
RGB形式的值本身就已經(jīng)帶了rgb的具體數(shù)值，只要用正則把值提取出來再轉(zhuǎn)化就可以了。
這個(gè)過程在GetData中進(jìn)行：
function GetData(color) {
var re = RegExp;
if (/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.test(color)) {
//#rrggbb
return $$A.map([ re.$1, re.$2, re.$3 ], function(x){
return parseInt(x, 16);
});
} else if (/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.test(color)) {
//#rgb
return $$A.map([ re.$1, re.$2, re.$3 ], function(x){
return parseInt(x + x, 16);
});
} else if (/^rgb\((.*),(.*),(.*)\)$/i.test(color)) {
//rgb(n,n,n) or rgb(n%,n%,n%)
return $$A.map([ re.$1, re.$2, re.$3 ], function(x){
return x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x | 0;
});
}
}
注意#rrggbb/#rgb形式得到的是16進(jìn)制的數(shù)值字符，把parseInt的第二個(gè)參數(shù)設(shè)為16就可以指定用16進(jìn)制來處理字符串轉(zhuǎn)換。
對(duì)于rgb(n,n,n)/rgb(n%,n%,n%)的形式，直接取得數(shù)值，如果有%就根據(jù)百分比計(jì)算對(duì)應(yīng)數(shù)值就行了。
使用這種形式設(shè)置顏色時(shí)也要注意，
ie6和ie7允許數(shù)字百分比混用，其他不可以（包括ie8）；
ie6和ie7可以用空格或逗號(hào)分隔數(shù)值，其他必須用逗號(hào)（包括ie8）；
當(dāng)然我們使用時(shí)也應(yīng)該是按照w3c的標(biāo)準(zhǔn)來設(shè)置了。
ps：那個(gè)DHTML 手冊(cè)上寫的 EM { color: rgb 1.0 0.0 0.0 } 是不能用的，不要被誤導(dǎo)了。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 JavaScript顏色梯度和漸變效果改進(jìn) [1] 下一頁 JavaScript顏色梯度和漸變效果改進(jìn) [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 2 頁 JavaScript顏色梯度和漸變效果改進(jìn) [2]
