DHTML幻燈片播放程序（一）

2020-03-24 18:50:56

字體：大中小

供稿：網(wǎng)友

這是一個(gè)幻燈片播放程序，也就是一圖片輪流播放的程序。我們?cè)谝恍┱军c(diǎn)上可以看見這種形式的廣告播放條，大多是用CGI做的，也就是要服務(wù)器端支持CGI程序，如ASP、PHP、Perl等。但我們這里的實(shí)現(xiàn)方法無(wú)需CGI，用的僅是CSS的效果，再加上JavaScripts的控制。只要你的瀏覽器是IE 4.0以上或是Netscape 3.0以上的就可以了。只不過(guò)在這里我們用到了CSS的Filter濾鏡效果，該效果只能在IE中出現(xiàn)。有關(guān)CSS的Filter濾鏡效果，大家可以參看我的《CSS中Filter濾鏡詳解》，該文章在Yesky.com上已經(jīng)發(fā)表。
好了，讓我們來(lái)做點(diǎn)準(zhǔn)備工作吧。首先，為了制作這個(gè)效果，我們首先要打幾個(gè)尺寸一樣大小的圖片，讓其輪流播放。比如，我找了下面三個(gè)88x31的圖片做為所用的的圖片。
其次，讓我們?cè)賮?lái)復(fù)習(xí)一下CSS中Filter的圖片轉(zhuǎn)換濾鏡的知識(shí)： CSS中的顯示轉(zhuǎn)換濾鏡顯示轉(zhuǎn)換濾鏡提供的是一種更為多變的轉(zhuǎn)換效果，它不像混合轉(zhuǎn)換濾鏡，只提供一種淡入淡出的效果，它還提供了更多的圖片轉(zhuǎn)換效果，它的語(yǔ)法是：Filter : RevealTrans ( duration = 轉(zhuǎn)換的秒數(shù)，transition=轉(zhuǎn)換類型 ) 大家可以看見，它有一個(gè)轉(zhuǎn)換類型的參數(shù)，這里，它提供了24種轉(zhuǎn)換類型，我們只需指定轉(zhuǎn)換類型的代號(hào)，就可以讓圖片按特有的轉(zhuǎn)換效果進(jìn)行轉(zhuǎn)換。下表就是24種轉(zhuǎn)換濾鏡的形式及其對(duì)應(yīng)的代號(hào)：
顯示轉(zhuǎn)換濾鏡的轉(zhuǎn)換形式所對(duì)應(yīng)的代號(hào) 顯示轉(zhuǎn)換濾鏡的轉(zhuǎn)換形式所對(duì)應(yīng)的代號(hào)
矩形從大至小 0 隨機(jī)溶解 12
矩形從小至大 1 垂直向內(nèi)裂開 13
圓形從大至小 2 垂直向外裂開 14
圓形從小至大 3 水平向內(nèi)裂開 15
向上推開 4 水平向外裂開 16
向下推開 5 向左下剝開 17
向右推開 6 向左上剝開 18
向左推開 7 向右下剝開 19
垂直形百葉窗 8 向右上剝開 20
水平形百葉窗 9 隨機(jī)水平細(xì)紋 21
水平棋盤 10 隨機(jī)垂直細(xì)紋 22
垂直棋盤 11 隨機(jī)選取一種特效 23
本文作者:html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML中ul標(biāo)簽如何去掉點(diǎn)？HTML無(wú)序列表的樣式實(shí)例

下一篇：html5 canvas實(shí)現(xiàn)圓形時(shí)鐘代碼分享