阿瑟 發表
最近小弟寫了一隻簡短的閃爍訊息, 希望能夠藉由這個機會來跟大家討論一下如果運用Javascript, 動態濾鏡與CSS樣式表來產生漸變特效.
我們來看看下面的這個效果:
<script language=javascript>
var switchblock = 500;
function glow_on()
{
messagebox.filters.blendTrans.apply();
messagebox.filters[0].Enabled = 1;
messagebox.filters.blendTrans.play();
setTimeout("glow_off()",switchblock);
}
function glow_off()
{
messagebox.filters.blendTrans.apply();
messagebox.filters[0].Enabled = 0;
messagebox.filters.blendTrans.play();
setTimeout("glow_on()",switchblock);
}
</script>
<BODY onload="glow_on();">
<DIV ID="messagebox" style="Filter:glow(color=#ff0000, strength=1) blendTrans(duration=0.5, transition=22); width:100%;">
<b>訊息</b><br>
這是利用Javascript, 動態濾鏡和CSS產生的閃爍文字效果喔!
</DIV>
|
其實這隻程式有點類似上一次介紹的"漸層看板".
這隻Javascript主要分為兩個函式: glow_on() 與 glow_off().
再來看看ID為message的DIV的部分, 他的style屬性中設定了兩組濾鏡, 一組是光暈濾鏡, 另外一組是融合動態濾鏡.
再回到glow_on()與glow_off()兩個函式的部分: style屬性中設定的濾鏡是可以用陣列的方式來操作的, 如
messagebox.filters[0].Enabled = 1;就是指開啟光暈濾鏡(glow filter).
小弟在這裡介紹一下動態濾鏡的用法:
在使用之前您必須先將濾鏡套用在一個物件上,如此例中的blendTrans(). 之後要進行漸變的時候, 再執行
messagebox.filters.blendTrans.apply();, 這行代表的是應用messagebox的濾鏡中的動態濾鏡, 如果您用的ID不同請記得修改.
應用以後, 您就可以開始改變內容的樣式. 如此範例中的
messagebox.filters[0].Enabled = 1;就是加上光暈濾鏡. 設定好以後, 再用
messagebox.filters.blendTrans.play();來撥放動態濾鏡, 在這個範例中, 您就可以看到物件慢慢的出現紅色光暈. setTimeout()函式則是在一定的時間後切換到另外一個函式. 看完了glow_on(), 另外一組函式glow_off()也是同樣的做法, 只是這次是光暈濾鏡慢慢消失.
您可以自己試試看設定成另外一個樣子, 如在文字加上透明濾鏡, 然後轉變顏色:
動態濾鏡的轉變並不限於其他的濾鏡, 如上面這個範例就是改變了字體顏色, 您可以用 物件.style.樣式 = 數值 來指定一個新的數值給某個樣式, 如
messagebox.style.color = "#FF0000"就是將messagebox物件的字體顏色改成深藍.
除了融合動態濾鏡 (blendTrans) 以外, 還有一種類似powerpoint換片特效的動態濾鏡可以使用.
這是套用了另外一種濾鏡後的效果:
<script language=javascript>
var switchblock = 100;
function glow_on()
{
messagebox.filters.revealTrans.apply();
messagebox.filters[0].Enabled = 1;
messagebox.style.color = "#FF0000";
messagebox.filters.revealTrans.play();
setTimeout("glow_off()",switchblock);
}
function glow_off()
{
messagebox.filters.revealTrans.apply();
messagebox.filters[0].Enabled = 0;
messagebox.style.color = "#000000";
messagebox.filters.revealTrans.play();
setTimeout("glow_on()",switchblock);
}
</script>
<DIV ID="messagebox" style="Filter:alpha(opacity=50, style=1) revealTrans(duration=0.5, transition=3); width:100%;">
<b>訊息</b><br>
這是利用Javascript, 動態濾鏡和CSS產生的閃爍文字效果喔!
</DIV>
|
基本上revealTrans與blendTrans用起來都是大同小異, 只是效果不同罷了. 這種濾鏡總共有23種濾鏡可以選, 0-23, 0-22都是濾鏡, 23則是隨機選取一種濾鏡. 以下是濾鏡列表:
| 濾鏡號碼 | 濾鏡效果 |
| 0 | 方塊出現 | 1 | 方塊消失 | 2 | 圓形向內 | 3 | 圓形向外 | 4 | 向上擦拭 | 5 | 向下擦拭 | 6 | 向左擦拭 | 7 | 向右擦拭 | 8 | 垂直窗簾 | 9 | 水平窗簾 | 10 | 棋盤交錯 | 11 | 棋盤向下 | 12 | 隨機分裂 | 13 | 垂直分割向內 | 14 | 垂直分割向外 | 15 | 水平分割向內 | 16 | 水平分割向外 | 17 | 左下方剝落 | 18 | 左上方剝落 | 19 | 右下方剝落 | 20 | 右上方剝落 | 21 | 水平隨機效果 | 22 | 垂直隨機效果 | 23 | 隨機 |
濾鏡, 樣式和Javascirpt再加上一點巧思, 就可以設計出一些很具特色的效果喔! 希望這篇教學對您有所幫助.