设计之家 > 靈感 > 網頁UI > 網頁理論 >

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

作者:未知 來源:本站原創 時間: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參數的值時,要使前者的時間大于后者的時間,否則,切換過程還沒有完成就又開始下一過程了,從而使人無法看清楚圖片。另外要注意,定時器是以毫秒為單位計時,而濾鏡是以秒為單位計時。

相關文章:

推薦設計

最新文章