網頁圖片實現百葉窗效果
製作
或者觀看過幻燈片的網友，一定不會對幻燈片的切換效果感到陌生，垂直百葉窗式、縱向棋盤式等切換效果是否讓你還記憶猶新呢？其實我們也可以把網頁中的圖片做出這種效果。
預想效果：幾張圖片輪流顯示，圖片切換時會出現垂直百葉窗式等效果，刷新後的切換效果不同。
實現代碼如下：
1.把以下代碼放在＜head＞與＜/head＞之間。
＜SCRIPT language=javascript＞
isns = navigator.appName == "Netscape";
img1=new Image()
img2=new Image()
img3=new Image()
img4=new Image()
img1.src='存放目錄/圖片1.jpg'
img2.src='存放目錄/圖片2.jpg'
img3.src='存放目錄/圖片3.jpg'
img4.src='存放目錄/圖片4.jpg'
nn=1
function change_img()
{
eval('document.pic.src=img'+nn+'.src');
nn++;
if(nn>4) nn=1
if(!isns)
{
pic.filters.item(0).apply()
pic.style.visibility='visible'
pic.filters.item(0).play()
setTimeout("pic.style.visibility='hidden'",4000);
}
else
document.pic.visibility='visible'
tt=setTimeout('change_img()',4000)
}
＜/SCRIPT＞
2.將需要加載的程序放在＜body ****＞正文中，如＜body onload=change_img();＞。
3.找到安放圖片的位置，然後插入以下代碼：
＜IMG height=158 width=130 name=pic style="FILTER: revealtrans(duration=2.0,transition=28);"＞
注：這個特效程序不支持Netscape瀏覽器。其中第三步中的height和width是圖片的實際高和寬。另外，你可以自主更改transition的值，並且會得到很多意想不到的效。
說明:
RevealTrans
兩個參數Transition和Duration，分別是變換效果和持續時間，其中Duration是浮點數。
此外還有兩個屬性Enabled和Percent分別是是否激活濾鏡和當前靜態濾鏡輸出在轉換進程中所處的點。
設置完後還需要運行apply和play方法，分別是應用變換效果和運行效果
下面列出所有效果和對應Transition值（參考手冊）：
值 : 效果
0 : 矩形收縮轉換。
1 : 矩形擴張轉換。
2 : 圓形收縮轉換。
3 : 圓形擴張轉換。
4 : 向上擦除。
5 : 向下擦除。
6 : 向右擦除。
7 : 向左擦除。
8 : 縱向百葉窗轉換。
9 : 橫向百葉窗轉換。
10 : 國際象棋棋盤橫向轉換。
11 : 國際象棋棋盤縱向轉換。
12 : 隨機雜點干擾轉換。
13 : 左右關門效果轉換。
14 : 左右開門效果轉換。
15 : 上下關門效果轉換。
16 : 上下開門效果轉換。
17 : 從右上角到左下角的鋸齒邊覆蓋效果轉換。
18 : 從右下角到左上角的鋸齒邊覆蓋效果轉換。
19 : 從左上角到右下角的鋸齒邊覆蓋效果轉換。
20 : 從左下角到右上角的鋸齒邊覆蓋效果轉換。
21 : 隨機橫線條轉換。
22 : 隨機豎線條轉換。
23 : 隨機使用上面可能的值轉換。
其中23比較特別，是隨機效果，程序默認就是隨機效果。