|
|
jocosn
白銀驢友
. 積分: 1386
. 精華: 2
. 文章: 2945
. 收花: 9537 支
. 送花: 3671 支
. 比例: 0.38
. 在線: 1295 小時
. 瀏覽: 19041 頁
. 註冊: 7431 天
. 失蹤: 1434 天
|
|
|
|
|
|
|
#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 作了最後編輯]
[如果你喜歡本文章,就按本文章之鮮花~送花給作者吧,你的支持就是別人的動力來源]
|
|