<td id="66111"></td>
與大家共同成長
很久沒寫blog，太忙了。沒什么時間寫復雜的東西，重新把顏色漸變效果寫一遍。 關于顏色的效果一般就兩個，顏色梯度變化和樣式的顏色漸變，前者在ie中一般用濾鏡實現。
實例效果
預覽效果1：
這是一個顏色梯度變化演示：
預覽效果2：
一個顏色漸變的菜單：
預覽效果3：
顏色漸變的有趣應用，點擊隨機顏色漸變：
程序說明
【ColorGrads顏色梯度】
程序ColorGrads的作用是通過StartColor和EndColor生成顏色梯度集合。 顏色都可以用紅(r)、綠(g)、藍(b)三個顏色來表示。 程序中先通過GetColor把一般的顏色表示形式轉化成一個用紅(r)、綠(g)、藍(b)三個顏色值作元素的集合。 那就首先要知道有什么顏色表示形式，從w3c的Colors部分可以知道有以下形式： 關鍵詞模式： 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統一返回RGB顏色模式的第三種形式，ie則按照設置時的形式返回。
先說說RGB顏色模式，前兩種比較常用應該都明白他們的區別吧，它用的是16進制表示形式，而我們想要10進制的。 把一個16進制表示的字符轉成10進制數字，一般用parseInt，在substr截取字符之后就可以用parseInt轉換。 對于#ff0000這個形式可以這樣轉換：
parseInt的第二個參數就是第一個參數的進制值。 對于#f00形式，跟上一個差不多，只是轉換之前要先換成完整表示形式：
后面兩種可能用的就比較少了，一個用10進制的rgb顏色值表示，另一個用百分比來表示。 ff嚴格按照那樣的格式來表示，而ie就“放松”很多，例如： ie可以允許數字百分比混用，ff不可以； ff必須有逗號分隔，ie可以只用空格分隔； 當然我們使用時最好是按照w3c的標準來設置了。 ps：那個DHTML 手冊上寫的 EM { color: rgb 1.0 0.0 0.0 } 根本不能用的，不要被誤導了。 對這個形式，程序用正則取得數值，如果有%就根據百分比計算出對應數值：
而關鍵詞大家都很熟悉，要轉化卻很麻煩，因為沒有一定規律只能一個一個對應：
在Create創建顏色集合程序中獲得開始顏色和結束顏色的數據后，再根據Step（多少步）就可以獲得步長了：
再根據步長生成集合：
正確的顏色值是在0到255之間的，而且是不帶小數的，所以最好修正一下：
【ColorTrans顏色漸變】
有了顏色梯度集合，只需要設個定時器把集合的值依次顯示就是一個漸變效果了。 這個漸變一般是分兩個步驟，分別是（FadeIn）和漸出（FadeOut）。 原理就是通過改變_index集合索引，漸入時逐漸變大，漸出時逐漸變小：
在SetColor設置樣式程序中，通過CssColor來設置要修改的樣式屬性，例如字體顏色是"color"，背景色是"backgroundColor"：
由于顏色集合是根據開始顏色、結束顏色和步數生成的，所以如果要修改這些屬性必須重新生成過集合。 Reset程序就是用來修改這些屬性并重新生成集合的，集合重新生成后索引也要設回0：
使用技巧
在顏色漸變菜單中，并沒有使用鏈接標簽a，原因是a的偽類的顏色并不能直接用js來修改（除非改class）。 暫時沒想到很好的方法，只好用onclick跳轉代替了。
在測試過程中還發現一個關于數組的問題，在ie和ff運行alert([,,].length)會分別顯示3和2。 最后一個元素不寫的話ff就會忽略這個元素，只要寫的話就不會忽略即使是undefined和null，看了下文檔也找到原因。 所以這個情況還是插一個東西進去，覺得不好看就new Array好了。
測試中還發現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來創建也一樣。 感覺這樣不太合理，應該以后會改進吧。
使用說明
ColorGrads只有3個屬性設置： StartColor: "#fff",//開始顏色 EndColor: "#000",//結束顏色 Step: 20//漸變級數 設置好屬性后用Create生成集合就行了。
ColorTrans只要一個參數，要實現漸變的對象，可設置以下屬性： StartColor: "",//開始顏色 EndColor: "#000",//結束顏色 Step: 20,//漸變級數 Speed: 20,//漸變速度 CssColor: "color"http://設置屬性（Scripting屬性） 如果不設置StartColor會自動使用CurrentStyle獲取的樣式值。 其中StartColor、EndColor和Step在實例化后要重新設置的話需要用Reset來設置。
具體使用請參考實例。
程序代碼
ColorGrads部分：
ColorTrans部分：
下載完整實例
Copyright @ 小菜毛毛 Powered by: .Text and ASP.NET Theme by: .NET Monster