阿瑟 發表
如果你用過PowerPoint的話, 一定知道裡面的換片效果, IE中也有類似的濾鏡可以達到這種效果.
之前在CSS教學中有介紹如何套用一般的濾鏡, 這次用的轉換濾鏡還需要配合script來觸發, 可能會比較困難一點.您可以先看看範例: [ 完成範例檔 ]
|
<div id="test" style="width:100%;filter: revealTrans(duration=2, transition=13)" onClick="blending(test)"> 這是第一段文字, 這我上面點一下我就會消失喔!</div> <br><br><br> <div id="test1" style="width:100%;filter: revealTrans(duration=2, transition=12)" onClick="blending(test1)"> 這是第二段文字, 這我上面點一下我就會消失喔!</div> <br><br><br> <div id="test2" style="width:100%;filter: revealTrans(duration=2, transition=23)" onClick="blending(test2)"> 這是第三段文字, 這我上面點一下我就會消失喔!</div> <script language=vbscript> <!-- Sub blending(info) info.filters.revealTrans.apply() info.style.visibility = "hidden" info.filters.revealTrans.play() end sub --> </script> |
程式執行過程:
網頁中的DIV 標籤都已經套用好revealTrans()轉換濾鏡, 透過Vbscript的觸發, DIV經過轉換濾鏡套用後就會隱藏.
語法講解:
div id="test", 指定id才能在script中識別每一個DIV標籤
style="width:100%;filter: revealTrans(duration=2, transition=13)" , revealTrans()是filter濾鏡, duration是濾鏡長度(以秒為單位) ,trasition是濾鏡樣式, 您可以查下面的濾鏡種類更換成自己要的轉換濾鏡.
onClick="blending(test)", 當使用者點選此DIV標籤的時候觸發blending()函式並且傳遞參數test (後面的當然就是傳遞test1)
Sub blending(info), 這段是一個函式的起始, info是參數
info.filters.revealTrans.apply(), 由於每一個物件都已經套用好revealTrans濾鏡, 這行指令會讓revealTrans就緒
info.style.visibility = "hidden", 其實在apply()和play()之間的就是轉變樣式, 如visibility="hidden"就是當濾鏡完成轉換以後, 物件會消失. 您看到的當然就是物件從一開始慢慢消失, 您也可以自己改, 如加上背景底色.
info.filters.revealTrans.play(), 播放濾鏡.
| 濾鏡號碼 | 濾鏡效果 |
| 0 | 方塊出現 | 1 | 方塊消失 | 2 | 圓形向內 | 3 | 圓形向外 | 4 | 向上擦拭 | 5 | 向下擦拭 | 6 | 向左擦拭 | 7 | 向右擦拭 | 8 | 垂直窗簾 | 9 | 水平窗簾 | 10 | 棋盤交錯 | 11 | 棋盤向下 | 12 | 隨機分裂 | 13 | 垂直分割向內 | 14 | 垂直分割向外 | 15 | 水平分割向內 | 16 | 水平分割向外 | 17 | 左下方剝落 | 18 | 左上方剝落 | 19 | 右下方剝落 | 20 | 右上方剝落 | 21 | 水平隨機效果 | 22 | 垂直隨機效果 | 23 | 隨機 |