BlendTrans濾鏡比起上一篇介紹的Revealtrans濾鏡來要簡單一些，它只有一個參數(shù)：Duration 變換時間，它的功能也比較單一，就是產(chǎn)生一種淡入淡出的效果，不過它的這種效果比起RevealTrans濾鏡的淡入淡出效果來要精細的多，你看看下面也就不言而喻了。
由于是動態(tài)轉(zhuǎn)換，上面只是我抓的三張圖片，只能幫助你了解其轉(zhuǎn)換過程，真正的效果只有待你按我下面講的方法動手做出來才能看到。使用BlendTrans濾鏡也和Revealtrans濾鏡一樣，需要借助于Javascript來調(diào)用它的方法來實現(xiàn)，我們現(xiàn)在就以實現(xiàn)上面這種效果為例來看看如何使用 BlendTrans濾鏡，首先你必須準備幾張同樣大小的圖片。
制作方法：
1、用老辦法（前面的文章已介紹了多次）制作一個BlendTrans濾鏡，取名為“myblen"，Duration設(shè)置為“3"（即轉(zhuǎn)換時間為3秒），濾鏡設(shè)置好后，在網(wǎng)頁源代碼的< 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">；
4、在網(wǎng)頁的源代碼< head >與< /head >之間插入下面這段Javascript程序：
< script language="JavaScript" >
< !--
// 獲取數(shù)組記錄數(shù)
function ImgArray(len)
{
this.length=len;
}
// 申明數(shù)組并給數(shù)組元素賦值，也就是把圖片的相對路徑保存起來，若是圖片較多，可增加數(shù)組元素的個數(shù)，
// 我在這個例子中只用了三張圖片，所以數(shù)組元素個數(shù)為“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”是你在網(wǎng)頁中插入的那張圖片的代號，
myimg.src=ImgName[i]; // 當(dāng)你改變了插入的圖片代號時，這里也一定要改變，
myimg.filters[0].play(); // 否則，程序在變換時可就找不著北了。
// 設(shè)置演示時間，這里是以毫秒為單位的，所以“6000"是指每張圖片的演示時間是6秒鐘，這個時間值要在于
// 濾鏡中設(shè)置的轉(zhuǎn)換時間值，這樣當(dāng)轉(zhuǎn)換結(jié)束后還停留一段時間，讓人看清楚圖片。
mytimeout=setTimeout("playImg()",6000);
}
-- >
< /script >
5、在網(wǎng)頁源代碼的< body >加入這樣的一句代碼：onload="playImg()"。
好了，快按F12欣賞你的杰作吧。
若是想在圖片上獲得上一篇介紹的RevealTrans濾鏡效果，只要把本例中的濾鏡代碼換一換就行了，動手試試吧！