JavaScript 顏色梯度和漸變效果第1/3頁(yè)
更新時(shí)間：2009年03月15日 21:15:07 作者：
程序ColorGrads的作用是通過(guò)StartColor和EndColor生成顏色梯度集合。
程序說(shuō)明
【ColorGrads顏色梯度】
程序ColorGrads的作用是通過(guò)StartColor和EndColor生成顏色梯度集合。
顏色都可以用紅(r)、綠(g)、藍(lán)(b)三個(gè)顏色來(lái)表示。
程序中先通過(guò)GetColor把一般的顏色表示形式轉(zhuǎn)化成一個(gè)用紅(r)、綠(g)、藍(lán)(b)三個(gè)顏色值作元素的集合。
那就首先要知道有什么顏色表示形式，從w3c的Colors部分可以知道有以下形式：
關(guān)鍵詞模式：
em { color: red }
RGB顏色模式：
em { color: #f00 }
em { color: #ff0000 }
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }
以上都是表示同一種顏色（紅色）。
獲取顏色屬性的形式在ie和ff并不同，ff統(tǒng)一返回RGB顏色模式的第三種形式，ie則按照設(shè)置時(shí)的形式返回。
先說(shuō)說(shuō)RGB顏色模式，前兩種比較常用應(yīng)該都明白他們的區(qū)別吧，它用的是16進(jìn)制表示形式，而我們想要10進(jìn)制的。
把一個(gè)16進(jìn)制表示的字符轉(zhuǎn)成10進(jìn)制數(shù)字，一般用parseInt，在substr截取字符之后就可以用parseInt轉(zhuǎn)換。
對(duì)于#ff0000這個(gè)形式可以這樣轉(zhuǎn)換：
return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],
function(x){ return parseInt(x, 16); }
)
parseInt的第二個(gè)參數(shù)就是第一個(gè)參數(shù)的進(jìn)制值。
對(duì)于#f00形式，跟上一個(gè)差不多，只是轉(zhuǎn)換之前要先換成完整表示形式：
return Map([color.substr(1, 1), color.substr(2, 1), color.substr(3, 1)],
function(x){ return parseInt(x + x, 16); }
)
后面兩種可能用的就比較少了，一個(gè)用10進(jìn)制的rgb顏色值表示，另一個(gè)用百分比來(lái)表示。
ff嚴(yán)格按照那樣的格式來(lái)表示，而ie就“放松”很多，例如：
ie可以允許數(shù)字百分比混用，ff不可以；
ff必須有逗號(hào)分隔，ie可以只用空格分隔；
當(dāng)然我們使用時(shí)最好是按照w3c的標(biāo)準(zhǔn)來(lái)設(shè)置了。
ps：那個(gè)DHTML 手冊(cè)上寫(xiě)的 EM { color: rgb 1.0 0.0 0.0 } 根本不能用的，不要被誤導(dǎo)了。
對(duì)這個(gè)形式，程序用正則取得數(shù)值，如果有%就根據(jù)百分比計(jì)算出對(duì)應(yīng)數(shù)值：
return Map(color.match(/\d+(\.\d+)?\%?/g),
function(x){ return parseInt(x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x, 10); }
)
而關(guān)鍵詞大家都很熟悉，要轉(zhuǎn)化卻很麻煩，因?yàn)闆](méi)有一定規(guī)律只能一個(gè)一個(gè)對(duì)應(yīng)：
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); }
)
}
在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);
});});
【ColorGrads顏色梯度】
程序ColorGrads的作用是通過(guò)StartColor和EndColor生成顏色梯度集合。
顏色都可以用紅(r)、綠(g)、藍(lán)(b)三個(gè)顏色來(lái)表示。
程序中先通過(guò)GetColor把一般的顏色表示形式轉(zhuǎn)化成一個(gè)用紅(r)、綠(g)、藍(lán)(b)三個(gè)顏色值作元素的集合。
那就首先要知道有什么顏色表示形式，從w3c的Colors部分可以知道有以下形式：
關(guān)鍵詞模式：
em { color: red }
RGB顏色模式：
em { color: #f00 }
em { color: #ff0000 }
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }
以上都是表示同一種顏色（紅色）。
獲取顏色屬性的形式在ie和ff并不同，ff統(tǒng)一返回RGB顏色模式的第三種形式，ie則按照設(shè)置時(shí)的形式返回。
先說(shuō)說(shuō)RGB顏色模式，前兩種比較常用應(yīng)該都明白他們的區(qū)別吧，它用的是16進(jìn)制表示形式，而我們想要10進(jìn)制的。
把一個(gè)16進(jìn)制表示的字符轉(zhuǎn)成10進(jìn)制數(shù)字，一般用parseInt，在substr截取字符之后就可以用parseInt轉(zhuǎn)換。
對(duì)于#ff0000這個(gè)形式可以這樣轉(zhuǎn)換：
復(fù)制代碼 代碼如下:
return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],
function(x){ return parseInt(x, 16); }
)
parseInt的第二個(gè)參數(shù)就是第一個(gè)參數(shù)的進(jìn)制值。
對(duì)于#f00形式，跟上一個(gè)差不多，只是轉(zhuǎn)換之前要先換成完整表示形式：
復(fù)制代碼 代碼如下:
return Map([color.substr(1, 1), color.substr(2, 1), color.substr(3, 1)],
function(x){ return parseInt(x + x, 16); }
)
后面兩種可能用的就比較少了，一個(gè)用10進(jìn)制的rgb顏色值表示，另一個(gè)用百分比來(lái)表示。
ff嚴(yán)格按照那樣的格式來(lái)表示，而ie就“放松”很多，例如：
ie可以允許數(shù)字百分比混用，ff不可以；
ff必須有逗號(hào)分隔，ie可以只用空格分隔；
當(dāng)然我們使用時(shí)最好是按照w3c的標(biāo)準(zhǔn)來(lái)設(shè)置了。
ps：那個(gè)DHTML 手冊(cè)上寫(xiě)的 EM { color: rgb 1.0 0.0 0.0 } 根本不能用的，不要被誤導(dǎo)了。
對(duì)這個(gè)形式，程序用正則取得數(shù)值，如果有%就根據(jù)百分比計(jì)算出對(duì)應(yīng)數(shù)值：
復(fù)制代碼 代碼如下:
return Map(color.match(/\d+(\.\d+)?\%?/g),
function(x){ return parseInt(x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x, 10); }
)
而關(guān)鍵詞大家都很熟悉，要轉(zhuǎn)化卻很麻煩，因?yàn)闆](méi)有一定規(guī)律只能一個(gè)一個(gè)對(duì)應(yīng)：
復(fù)制代碼 代碼如下:
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); }
)
}
在Create創(chuàng)建顏色集合程序中獲得開(kāi)始顏色和結(jié)束顏色的數(shù)據(jù)后，再根據(jù)Step（多少步）就可以獲得步長(zhǎng)了：
復(fù)制代碼 代碼如下:
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)生成集合：
復(fù)制代碼 代碼如下:
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ù)的，所以最好修正一下：
復(fù)制代碼 代碼如下:
return Map(colors, function(x){ return Map(x, function(x){
return Math.min(Math.max(0, Math.floor(x)), 255);
});});
您可能感興趣的文章:
- JS Tween 顏色漸變
- 利用遞增的數(shù)字返回循環(huán)漸變的顏色的js代碼
- js+HTML5實(shí)現(xiàn)canvas多種顏色漸變效果的方法
- js實(shí)現(xiàn)按鈕顏色漸變動(dòng)畫(huà)效果
- javascript實(shí)現(xiàn)顏色漸變的方法
- JS實(shí)現(xiàn)的顏色實(shí)時(shí)漸變效果完整實(shí)例
- 神奇！js+CSS+DIV實(shí)現(xiàn)文字顏色漸變效果
- 漂亮! js實(shí)現(xiàn)顏色漸變效果
- Javascript 顏色漸變效果的實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)顏色階梯漸變效果（Gradient算法）
相關(guān)文章
淺析JavaScript中的平穩(wěn)退化（graceful degradation）
所謂平穩(wěn)退化，就是指可以讓訪問(wèn)者在瀏覽器不支持javascript或者禁用了JavaScript的時(shí)候依舊可以順利的瀏覽你的網(wǎng)頁(yè)，下文給大家簡(jiǎn)單介紹了js中的平穩(wěn)退化，感興趣的朋友一起看看吧2017-07-07
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)本地時(shí)間同步功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
原生JS forEach()和map()遍歷的區(qū)別、兼容寫(xiě)法及jQuery $.each、$.map遍歷操作
這篇文章主要介紹了原生JS forEach()和map()遍歷的區(qū)別、兼容寫(xiě)法及jQuery $.each、$.map遍歷操作,結(jié)合實(shí)例形式分析了JS使用forEach()和map()以及jQuery使用$.each、$.map進(jìn)行遍歷操作相關(guān)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-02-02
截取字符串的方法有很多，在使用過(guò)程中根據(jù)自己的實(shí)際需求進(jìn)行選擇，下面整理了一些常用的方法及使用示例，感興趣的朋友可以了解下2013-10-10
JavaScript自動(dòng)內(nèi)存管理與垃圾回收策略詳細(xì)分析講解
JS的垃圾回收機(jī)制是為了以防內(nèi)存泄漏，內(nèi)存泄漏的含義就是當(dāng)已經(jīng)不需要某塊內(nèi)存時(shí)這塊內(nèi)存還存在著，垃圾回收機(jī)制就是間歇的不定期的尋找到不再使用的變量，并釋放掉它們所指向的內(nèi)存。因?yàn)閮?nèi)存的大小是有限的，所以當(dāng)內(nèi)存不再需要的時(shí)候，我們需要對(duì)其進(jìn)行釋放2023-01-01
JS根據(jù)當(dāng)天不同時(shí)間顯示不同廣告的代碼
這篇文章主要介紹了JS根據(jù)當(dāng)天不同的時(shí)間段顯示不同廣告的代碼，可以精確到小時(shí)當(dāng)然如果分鐘都可以判斷出來(lái),需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要為大家詳細(xì)介紹了TableSort.js表格排序插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了支持移動(dòng)端原生js輪播圖的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
JavaScript如何刪除對(duì)象的某個(gè)屬性詳析
這篇文章主要給大家介紹了關(guān)于JavaScript如何刪除對(duì)象的某個(gè)屬性的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05