javascript線性漸變一

2024-05-06 14:13:29

字體：大中小

來源：轉載

供稿：網友

作為新力軍，蘋果為我們帶來了canvas標簽。canvas首次在Mac OS X中的Dashboard中被引入，之后又被蘋果公司的Safari瀏覽器所支持，緊接著就成為HTML5的標準，被IE內核以外的標準瀏覽器所支持。蘋果做的好事還不止這一樁，它認為SVG太笨重了，于是它把SVG里的濾鏡標簽統統CSS屬性化（SVG的濾鏡比IE濾鏡還多呢，而且功能更全面）。firefox一看不對勁，連忙自己也搞一套私有屬性，只不過是前綴由-webkit-改為-moz-罷了。opera的反應比較呆滯，應該說私底下非常不滿，因為opera的CTO就是CSS的發明者Hakon Wium Lie，不喜歡別人對自己的東西啥搞。因此我實現線性漸變就困難重重了，IE需要用IE濾鏡，firefox在動態創建SVG存在一些問題，需要用其-moz-前綴的CSS私有屬性，safari與chrome需要用-webkit-前綴的CSS私有屬性，opera需要用SVG。現在一個個突破吧。

IE要用到DXImageTransform.Microsoft.Gradient濾鏡（最后那個Gradient的首字母大寫小寫無所謂）。

屬性	說明
enabled	是否啟用濾鏡，默認為true
gradientType	是垂直漸變還是水平漸變，默認是0(垂直漸變)，1為水平漸變
startColorStr	起始顏色，能接受一個8位hex顏色值，從#FF000000到#FFFFFFFF，默認是藍色#FF0000F；或者使用red,green等顏色值F
endColorStr	結束顏色，能接受一個8位hex顏色值，從#FF000000到#FFFFFFFF，默認是黑色#FF000000
startColor	作用同startColorStr，接受一個0到4294967295整體顏色值，沒有默認值
endColor	作用同endColorStr，接受一個0到4294967295整體顏色值，沒有默認值

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
接著講述一下SVG線性漸變的實現，因為相關的CSS私有屬性都衍生于此。由于沒有什么空間支持上傳SVG，我只能動態生成SVG了。對我來說，能動態實現最好不過了，起碼能減少請求數，少寫許多大于號小于號……下面是靜態實現，至于怎樣加入html自己google吧。

上一篇：jQuery技巧大放送學習jquery的朋友可以看下

下一篇：JavaScript 對象成員的可見性說明