動(dòng)態(tài)特效變換圖片效果制作
左邊這種動(dòng)態(tài)切換效果，具有二十三種切換樣式，并不是用動(dòng)畫(huà)軟件制作的動(dòng)畫(huà)，而是用javascript制作出來(lái)的效果，是不是有點(diǎn)出乎你的意料。更值得一看的是它只用了廖廖幾行程序代碼，且變換的圖片數(shù)量可以隨意增加卻不增加程序代碼。你感到奇怪嗎？繼續(xù)往下看你就明白了。
制作思路：給插入的圖片加上一個(gè)ID（img1)號(hào)，以便 javascript程序?qū)ζ洳僮鳎俳o圖片加載一個(gè)CSS的動(dòng)態(tài)濾鏡revealTrans，然后用一小段javascript程序定時(shí)不斷地改變r(jià)evealTrans濾鏡的Transition參數(shù)值以獲得不斷地更換切換樣式，同時(shí)通過(guò)程序不斷地改變圖像標(biāo)記<img>的“src”（圖片的地址）參數(shù)值，以獲得來(lái)更換圖片的效果。
制作方法：
1、在網(wǎng)頁(yè)中插入一張圖片，給圖片加上ID號(hào)為：img1，若改變ID號(hào)，那么在程序中也要作相應(yīng)改變。再給圖片加載一個(gè)revealTrans濾鏡，完成后的圖像標(biāo)記<img>的完整代碼如下：
<img id=”img1″ src=”upfiles/cssp1.jpg” width=”200″ height=”134″ style=”filter:revealTrans(Transition=1,Duration=1.5)” >
濾鏡中的Duration是控制切換時(shí)間（以秒計(jì)）的，本例設(shè)置的是1.5秒，若想使切換過(guò)程慢一些，可加大Duration參數(shù)的值。
2、在網(wǎng)頁(yè)源代碼的<head>與</head>之間插入下面這段javascript程序代碼：
<script language=”javascript”>
<!–
var k=0; //聲明一個(gè)計(jì)數(shù)器變量
var imgname1=”upfiles/cssp”; //所有圖片地址的前面相同的部分，要根據(jù)實(shí)際修改這個(gè)值。
var imgname2=”.jpg”; //圖片的文件格式，可根據(jù)實(shí)際情修改，前面那個(gè)小點(diǎn)不要漏了。
var imgnub=3; //要展示的圖片的張數(shù)，根據(jù)實(shí)際修改此值。
function start(){ //程序主體部分
obj=eval(“img1”); //若圖像標(biāo)記的ID號(hào)改變，請(qǐng)修改括號(hào)中的字符串值。
if (obj.filters.item(0).Transition==23) // 這部分語(yǔ)句是用于改變切換樣式，在23種樣式中循環(huán)。
obj.filters.item(0).Transition=1;
else
obj.filters.item(0).transition++;
obj.filters.item(0).Apply();
if (k<imgnub) {k++; //這部分語(yǔ)句用于改變圖像標(biāo)記的src的圖片地址（既含路徑的文件名）。
}else {k=1;
}
obj.src=imgname1+k+imgname2;
obj.filters.item(0).Play();
setTimeout(“start(1)”,3000); //每三秒鐘刷新一次。
}
–>
</script>
若要讓圖片在切換后停留的時(shí)間長(zhǎng)一點(diǎn)，可加大定時(shí)函數(shù)setTimeout中的定時(shí)數(shù)值（以毫秒計(jì)）。
3、在網(wǎng)頁(yè)源代碼的<body>標(biāo)記中加上onload=”start()”事件，以使得在網(wǎng)頁(yè)載入時(shí)就顯示動(dòng)態(tài)切換效果。
至此，制作結(jié)束。是不是一點(diǎn)都不難？！但在實(shí)際制作應(yīng)注意以下幾點(diǎn)：
1、所有圖片的文件名和文件格式要統(tǒng)一，用序號(hào)區(qū)分，如本例所用圖片的文件名（含相對(duì)路徑）為：upfiles/cssp1.jpg、upfiles/cssp2.jpg、upfiles/cssp3.jpg；
2、所有圖片的大小最好要一致。若圖片的大小不一致，雖不影響程序的運(yùn)行，但在顯示時(shí)，均以插入在網(wǎng)頁(yè)上的那張圖片的大小來(lái)顯示，那么，大的圖片將縮小顯示，小的圖片放大顯示，影響效果。
3、在修改定時(shí)器函數(shù)setTimeout中的定時(shí)時(shí)間或修改CSS的revealTrans的切換時(shí)間Duration參數(shù)的值時(shí)，要使前者的時(shí)間大于后者的時(shí)間，否則，切換過(guò)程還沒(méi)有完成就又開(kāi)始下一過(guò)程了，從而使人無(wú)法看清楚圖片。另外要注意，定時(shí)器是以毫秒為單位計(jì)時(shí)，而濾鏡是以秒為單位計(jì)時(shí)。
