 |
 |
jocosn
白銀驢友
． 積分： 1386
． 精華： 2
． 文章： 2945
． 收花： 9537 支
． 送花： 3671 支
． 比例： 0.38
． 在線： 1295 小時
． 瀏覽： 19041 頁
． 註冊： 7249 天
． 失蹤： 1251 天
|
|
|
 |
|
 |
|
| #3 : 2005-3-29 10:40 PM
只看本作者
|
 送花
(7)
 送出中...
|
|
|
補充一下 CSS 內設定濾鏡
請注意，濾鏡只能在 IE 下執行。如果你是用 firefox 等這類的瀏覽器，則無法看到效果。
濾鏡基本語法規則
filter : filtername(parameters)
濾鏡名稱與功能描述 
1. alpha 透明度變化效果
filter : alpha(opacity=opacity, finishOpacity=finishopacity, style=style,
startX=startX, startY=startY, finishX=finishX, finishY=finishY)
· opacity 透明度等級，範圍 0～100，0 表完全透明，100 表完全不透明
· finishopacity 設定結束時的透明度(可省略)，可做漸變效果，範圍 0～100
· style 指定透明區域的形狀。
0 代表均勻形狀；1 線形；2 放射狀；3 長方形
· startX 和 startY 漸變透明效果的開始坐標
· finishX 和 finishY 漸變透明效果的結束坐標
[範例]
filter:Alpha(Opacity="0", FinishOpacity="40", Style="2";)
2. blur 模糊效果
3. dropshadow 陰影投射
filter : dropshadow(color=color, offx=offx, offy=offy, positive=positive)
· color 投射陰影的顏色
· offx 水平方向陰影的偏移量
· offy 垂直方向陰影的偏移量
· positive 非透明處建立投影，為布林值
值為 true(或1)，非透明處建立可見的投影
值若為 false(或0)，透明部分建立透明效果
4. flipH 水平翻轉
5. flipV 垂直翻轉
6. glow 邊界增加色彩光效
7. gray 灰階形式顯示
8. invert 將色彩、飽和度以及亮度值完全反轉，類似底片效果
9. light 燈光投影
· AddAmbient 加入包圍的光源
· addcone 加入錐形光源
· addpoint 加入點光源
· changcolor 改變光的顏色
· changstrength 改變光源的強度
· clear 清除所有的光源
· movelight 移動光源
10. mask 彩色透明遮罩
filter : mask(color=color)
11. shadow 在指定的方向建立物體的陰影
filter : shadow(color=colorName, direction=dirextion)
· color 是投影色
· direction 是設置投影的方向，0 度代表垂直向上，每45度
為一個單位，預設值是 270 度。
12. wave 建立波形效果
filter : wave(add=add, freq=freq, lightstrength=strength,
phase=phase, strength=strength)
· add 是否按照波形樣式打亂
· freq 波形的頻率
· lightstrength 波形增強光影的效果，範圍 0～100
· phase 正弦波的偏移量
· strength 波形振幅大小
13. xray 類似X光片
[註] shadow 屬性可設定任意角度的陰影投射
dropshadow 屬性是用偏移量來定義陰影
想看效果可點以下連結某個熱心人士的網頁http://spaces.msn.com/members/ge ... 4sFC7C_1A!758.entry
Javascript 動態濾鏡使用示範
<html>
<head>
<script>
var oc=0;
function fadeIn() {
image1.style.filter="Alpha(opacity="+oc+", finishopacity=0, style=2)"
if(oc!=100) setTimeout('oc++; fadeIn()',40);
else setTimeout('fadeOut()',5000);
}
function fadeOut() {
image1.style.filter="Alpha(opacity="+oc+", finishopacity=0, style=2)"
if(oc!=0) setTimeout('oc--;fadeOut()',40);
else setTimeout('fadeIn()',1000);
}
</script>
</head>
<body onload="fadeIn()">
<p id="image1" style="filter:Alpha(opacity=0,finishopacity=0,style=2)">
<img src="./pics/EMAIL.jpg">
</p>
</body>
</html>
[jocosn 在 2005-3-31 03:53 PM 作了最後編輯]
[如果你喜歡本文章，就按本文章之鮮花～送花給作者吧，你的支持就是別人的動力來源]
|
|
