|
|
HTML4的顏色值
| black = #000000 | green = #008000 | silver = #c0c0c0 | lime = #00ff00 |
| gray = #808080 | olive = #808000 | white = #ffffff | yellow = #ffff00 |
| maroon = #800000 | navy = #000080 | red = #ff0000 | blue = #0000ff |
| purple = #800080 | teal = #008080 | fuchsia = #ff00ff | aqua = #00ffff |
復制代碼 代碼如下:
var htmlcolor={ black :"#000",green :"#008000",silver :"#c0c0c0",lime :"#0f0",
gray :"#808080",olive :"#808000",white :"#fff",yellow :"#ff0",
maroon :"#800000",navy :"#000080",red :"#f00",blue :"#00f",
purple :"#800080",teal :"#008080",fuchsia :"#f0f",aqua :"#0ff",
indigo :"#4b0082",orange : "#ffa500",sienna :"#a0522d",plum :"#dda0dd",
gold :"#ffd700", tan :"#d2b48c", snow :"#fffafa",violet :"#ee82ee"
}
接著我們在需要線性漸變的那個元素內部創建一個同樣大小的rect元素，然后里面再添加一個fill元素，用來設置漸變。偽碼如下：
復制代碼 代碼如下:
<div class="gradient" style="position:relative;width:width;height:height">
Javascript線性漸變 by 司徒正美 實現多重水平漸變效果
<vml:rect style="position:absolute;width:width;height;top:0;left:0" stroked="f" >
<vml:fill colors="與SVG相對應的color-stop" focus="100%" type="gradient" method="linear"/>
</vml:rect>
</div>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
利用VML實現IE的線性漸變后整個類的長度減少一半。
我們再來看如何實現角度漸變，IE那邊好辦，直接傳入一個角就行了（0―360，也可以為負數）。SVG比較麻煩，它由linearGradient 的四個屬性來控制傾斜度，x1,x2,y2,y2，實質就是兩個點。假設第一個點為(0,0)，第二個點為（100,0），它就是水平漸變。假設第一個點為(0,0)，第二個點為（0,100），它就是垂直漸變。要實現傾斜就必須讓第二個點的坐標與第一個點的坐標完全不相等，無論是X軸還是Y軸。這就要用到三角函數了。
復制代碼 代碼如下:
var x = (Math.sin(angle*Math.PI/180) * 100).toFixed(2)+"%";
var y = (Math.cos(angle*Math.PI/180)* 100).toFixed(2)+"%";
this.attr(linearGradient,{x2:x,y2:y});
我們也應該看得出水平漸變與垂直漸變其實只是一個特例，我們大可以廢除type這個屬性，改成angle，傳入一個0至360的數。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
JavaScript技術：javascript 線性漸變三，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
