[CSS]BlendTrans濾鏡

　　BlendTrans濾鏡比起上一篇介紹的Revealtrans濾鏡來要簡單一些，它只有一個參數：Duration 變換時間，它的功能也比較單一，就是產生一種淡入淡出的效果，不過它的這種效果比起RevealTrans濾鏡的淡入淡出效果來要精細的多，你看看下面也就不言而喻了。

　　由於是動態轉換，上面只是我抓的三張圖片，只能協助你瞭解其轉換過程，真正的效果只有待你按我下面講的方法動手做出來才能看到。使用BlendTrans濾鏡也和Revealtrans濾鏡一樣，需要藉助於Javascript來調用它的方法來實現，我們現在就以實現上面這種效果為例來看看如何使用BlendTrans濾鏡，首先你必須準備幾張同樣大小的圖片。

　　製作方法：

　　1、用老辦法（前面的文章已介紹了多次）製作一個BlendTrans濾鏡，取名為“myblen"，Duration設定為“3"（即轉換時間為3秒），濾鏡設定好後，在網頁原始碼的< head >與< /head >之間將有下面這樣的代碼：

　　< style type="text/css" >

　　< !--

　　　.myblen { filter:blendTrans(Duration=3)}

　　-- >

　　< /style >

　　2、插入第一張圖片，在圖片的屬性面板上給圖片加個名稱：myimg；

　　3、把BlendTrans濾鏡載入到圖片上；這時圖片的“img"標記的代碼是這樣的：< img src="image/cssp1.jpg" width="200" height="134" class="mybend" name="myimg" align="left" >；

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

　　< script language="JavaScript" >

　　< !--

　　// 擷取數組記錄數

　　function ImgArray(len)

　　{

　　　this.length=len;

　　}

　　// 申明數組並給數組元素賦值，也就是把圖片的相對路徑儲存起來，若是圖片較多，可增加數組元素的個數，

　　// 我在這個例子中只用了三張圖片，所以數組元素個數為“3"。

　　ImgName=new ImgArray(3);

　　ImgName[0]="image/cssp2.jpg";

　　// 你在製作時要把這裡的"image/cssp2.jpg"換成你的圖片所在的路徑和圖片檔案名稱；

　　ImgName[1]="image/cssp3.jpg";

　　// 你在製作時要把這裡的"image/cssp3.jpg"換成你的圖片所在的路徑和圖片檔案名稱；

　　ImgName[2]="image/cssp1.jpg";

　　// 你在製作時要把這裡的"image/cssp1.jpg"換成你的圖片所在的路徑和圖片檔案名稱；

　　var i=1;

　　// 示範變換效果

　　function playImg()

　　{

　　　if (i==2)

　　　{ i=0 ;}

　　　else

　　　{ i++; }

　　myimg.filters[0].apply(); // 這裡的“myimg”是你在網頁中插入的那張圖片的代號，

　　myimg.src=ImgName[i]; // 當你改變了插入的圖片代號時，這裡也一定要改變，

　　myimg.filters[0].play(); // 否則，程式在變換時可就找不著北了。

　　// 設定示範時間，這裡是以毫秒為單位的，所以“6000"是指每張圖片的示範時間是6秒鐘，這個時間值要在於

　　// 濾鏡中設定的轉換時間值，這樣當轉換結束後還停留一段時間，讓人看清楚圖片。

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

　　　}

　　-- >

　　< /script >

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

　　好了，快按F12欣賞你的傑作吧。

　　若是想在圖片上獲得上一篇介紹的RevealTrans濾鏡效果，只要把本例中的濾鏡代碼換一換就行了，動手試試吧！