動態特效變換圖片效果制作

作者：未知　來源：本站原創　時間：2006-03-08　類別：網頁理論

動態特效變換圖片效果制作

動態特效變換圖片效果制作左邊這種動態切換效果，具有二十三種切換樣式，并不是用動畫軟件制作的動畫，而是用javascript制作出來的效果，是不是有點出乎你的意料。更值得一看的是它只用了廖廖幾行程序代碼，且變換的圖片數量可以隨意增加卻不增加程序代碼。你感到奇怪嗎？繼續往下看你就明白了。

制作思路：給插入的圖片加上一個ID（img1)號，以便 javascript程序對其操作，再給圖片加載一個CSS的動態濾鏡revealTrans，然后用一小段javascript程序定時不斷地改變revealTrans濾鏡的Transition參數值以獲得不斷地更換切換樣式，同時通過程序不斷地改變圖像標記<img>的“src”（圖片的地址）參數值，以獲得來更換圖片的效果。

制作方法：

1、在網頁中插入一張圖片，給圖片加上ID號為：img1，若改變ID號，那么在程序中也要作相應改變。再給圖片加載一個revealTrans濾鏡，完成后的圖像標記<img>的完整代碼如下：
<img id="img1" src="upfiles/cssp1.jpg" width="200" height="134" style="filter:revealTrans(Transition=1,Duration=1.5)" >
濾鏡中的Duration是控制切換時間（以秒計）的，本例設置的是1.5秒，若想使切換過程慢一些，可加大Duration參數的值。

2、在網頁源代碼的<head>與</head>之間插入下面這段javascript程序代碼：

<script language="javascript">
<!--
var k=0; //聲明一個計數器變量
var imgname1="upfiles/cssp"; //所有圖片地址的前面相同的部分，要根據實際修改這個值。
var imgname2=".jpg"; //圖片的文件格式，可根據實際情修改，前面那個小點不要漏了。
var imgnub=3; //要展示的圖片的張數，根據實際修改此值。
function start(){ //程序主體部分
obj=eval("img1"); //若圖像標記的ID號改變，請修改括號中的字符串值。
if (obj.filters.item(0).Transition==23) // 這部分語句是用于改變切換樣式，在23種樣式中循環。
obj.filters.item(0).Transition=1;
else
obj.filters.item(0).transition++;
obj.filters.item(0).Apply();
if (k<imgnub) {k++; //這部分語句用于改變圖像標記的src的圖片地址（既含路徑的文件名）。
}else {k=1;
}
obj.src=imgname1+k+imgname2;
obj.filters.item(0).Play();
setTimeout("start(1)",3000); //每三秒鐘刷新一次。
}
-->
</script>

若要讓圖片在切換后停留的時間長一點，可加大定時函數setTimeout中的定時數值（以毫秒計）。

3、在網頁源代碼的<body>標記中加上onload="start()"事件，以使得在網頁載入時就顯示動態切換效果。

至此，制作結束。是不是一點都不難？！但在實際制作應注意以下幾點：
1、所有圖片的文件名和文件格式要統一，用序號區分，如本例所用圖片的文件名（含相對路徑）為：upfiles/cssp1.jpg、upfiles/cssp2.jpg、upfiles/cssp3.jpg；
2、所有圖片的大小最好要一致。若圖片的大小不一致，雖不影響程序的運行，但在顯示時，均以插入在網頁上的那張圖片的大小來顯示，那么，大的圖片將縮小顯示，小的圖片放大顯示，影響效果。
3、在修改定時器函數setTimeout中的定時時間或修改CSS的revealTrans的切換時間Duration參數的值時，要使前者的時間大于后者的時間，否則，切換過程還沒有完成就又開始下一過程了，從而使人無法看清楚圖片。另外要注意，定時器是以毫秒為單位計時，而濾鏡是以秒為單位計時。

标签： 動態特效變換

相關文章：

推薦設計

最新文章