[CSS]RevealTrans 濾鏡

CSS的 RevealTrans 濾鏡

  

     

  　　CSS的RevealTrans動態濾鏡是一個神奇的濾鏡，它能產生23種動態效果，更為奇妙的是它還能在23種動態效果中隨機抽用其中的一種。用它來進行網頁之間的動態切換，簡直方便極了，你只要在網頁原始碼的< head >與< /head >之間插入這樣一行代碼：< Meta content=revealTrans(Transition=14,Duration=3.0) http-equiv=Page-enter >，當你進入這個頁面時，網頁將象拉幕一樣從中間向兩邊拉開，是不是別具一格？！

  

  　　RevealTrans濾鏡只有兩個參數，Duration：是切換時間，以秒為單位；Transition：是切換方式，它有24種方式，詳見下表：  

轉場效果	Transition參數值	轉場效果	Transition參數值
矩形從大至小	0	隨機溶解	12
矩形從小至大	1	從上下向中間展開	13
圓形從大至小	2	從中間向上下展開	14
圓形從小至大	3	從兩邊向中間展開	15
向上推開	4	從中間向兩邊展開	16
向下推開	5	從右上向左下展開	17
向右推開	6	從右下向左上展開	18
向左推開	7	從左上向右下展開	19
垂直形百葉窗	8	從左下向右上展開	20
水平形百葉窗	9	隨機水平細紋	21
水平棋盤	10	隨機垂直細紋	22
垂直棋盤	11	隨機選取一種特效	23

   

  　　因此，你只要改變RevealTrans濾鏡的“Transition"的值，就能獲得不同的網頁轉場效果，是不是太方便了點？但很遺憾，要把RevealTrans濾鏡用於網頁中的某個對象就沒有這麼簡單了，它必須藉助於Javascript來調用其方法，才能實現，這就是說要動手編程式了。但也不是太難，下面我將通過一個製作動態字幕變換的例子來說明其使用方法。  

     

  　　漸淡字幕變換效果

  

  　　這個例子示範了利用Javascript程式控制Revealtrans濾鏡來實現字幕逐漸淡出和漸進的效果，請看下面的：

  

  開始的字幕

  

  漸層中字幕

  

  第二幅字幕  

  　　上面的效果看起來好象不好，是嗎？實際效果看起來比這漂亮多了。由於是動態轉換，上面只是我抓的三張圖片，只能協助你瞭解其轉換過程，真正的效果只有待你按我下面講的方法動手做出來才能看到。請看製作方法：

  

  　　1、製作一個Revealtrans濾鏡，取名為“mytrans"，其製作方法與前面介紹的靜態濾鏡相同，參數值為Transition=12,Duration=2。設定好後，在網頁原始碼的< head >與< /head >之間將有下面這樣的代碼：

  

  　　< style type="text/css" >

　　< !--

　　.mytrans { filter:revealTrans(Transition=12,Duration=2)}

　　-- >

　　< /style >

  

  　　2、插入一個層，我們把層的“Layer ID”改為“div1”（可直接在層的屬性面板上加入即可），並設定好層的背景和調整好層的大小，並把Revealtrans濾鏡載入到到層上，這時你看到的層的標記代碼是這樣的：< div id="div1" style="position:absolute; width:680px; height:30px; z-index:37; background: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000" class="mytrans" >< /div >

  

  　　3、在網頁原始碼的< head >與< /head >之間插入下面這段Javascript程式：

  

  　　< script language="JavaScript" >

　　< !--

　　function HelpArray(len)

　　{

　　this.length=len;

　　}

　　// 建立一個數組，存放轉換的內容。

　　HelpText=new HelpArray(5);

　　HelpText[0]="在一個文檔使用動態轉換的濾鏡（Revealtrans）其實是很容易的。";

　　HelpText[1]="首先，為對象的樣式表單建立一個需要轉換的“Revaltrans"濾鏡，";

　　HelpText[2]="然後，使用“apply()"方法防止錯誤，";

　　HelpText[3]="現在，你可以改變任何你想改變的東西，";

　　HelpText[4]="最後，“play()"方法開始進行轉換。";

　　ScriptText=new HelpArray(5);

　　var i= -1;

　　// 顯示轉換效果

　　function playHelp()

　　{

　　if (i==4)

　　{ i=0 ;}

　　else

　　{ i++; }

　　div1.filters[0].apply();

　　div1.innerText=HelpText[i];

　　div1.filters[0].play();

　　// 設定每段字幕示範的時間，以毫秒計。這裡的時間要長於濾鏡中的時間，以保證在轉換結束後能停留一段時間。

　　// 以方便看清楚字幕內容。在本例中字幕示範的時間是6秒，濾鏡中設定的轉換時間是2秒。

　　mytimeout=setTimeout("playHelp()",6000);

　　}

　　-- >

　　< /script >

  

  　　4、在網頁的原始碼的< body >中加入這樣一句代碼：onload="playHelp()"。

  

  　　到此，可以按F12看效果了，好象也不是太難。你若是想看看其它的轉換效果，只要改變一下Revealtrans濾鏡中的Transition參數值就行了，其它什麼也不用改動，你瞧多方便！用它來作廣告條我想效果不會差。比起動畫來可瘦小多了。

  

  　　當然Revealtrans濾鏡同樣也可以用於圖片，效果也不錯，但要改動一下Javascript程式。由於CSS還有一個動態濾鏡是BlendTrans濾鏡，用它做圖片的淡入淡出效果相當不錯，且這兩個濾鏡的使用方法有許多類似的地方，所以關於怎樣在圖片上用Revealtrans濾鏡來產生變換效果，我就一併放到下篇一起講了。