網站建設是指使用標識語言(markup language),通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸,最終以圖形用戶界面(GUI)的形式被用戶所瀏覽。簡單來說,網頁設計的目的就是產生網站。簡單的信息如文字,圖片(GIF,JPEG,PNG)和表格,都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。這是一個幻燈片播放程序,也就是一圖片輪流播放的程序。我們在一些站點上可以看見這種形式的廣告播放條,大多是用CGI做的,也就是要服務器端支持CGI程序,如ASP、PHP、Perl等。但我們這里的實現方法無需CGI,用的僅是CSS的效果,再加上JavaScripts的控制。只要你的瀏覽器是IE 4.0以上或是Netscape 3.0以上的就可以了。只不過在這里我們用到了CSS的Filter濾鏡效果,該效果只能在IE中出現。有關CSS的Filter濾鏡效果,大家可以參看我的《CSS中Filter濾鏡詳解》,該文章在Yesky.com上已經發表。 好了,讓我們來做點準備工作吧。
首先,為了制作這個效果,我們首先要打幾個尺寸一樣大小的圖片,讓其輪流播放。比如,我找了下面三個88x31的圖片做為所用的的圖片。
其次,讓我們再來復習一下CSS中Filter的圖片轉換濾鏡的知識:
CSS中的顯示轉換濾鏡
顯示轉換濾鏡提供的是一種更為多變的轉換效果,它不像混合轉換濾鏡,只提供一種淡入淡出的效果,它還提供了更多的圖片轉換效果,它的語法是:
Filter : RevealTrans ( duration = 轉換的秒數,transition=轉換類型 )
大家可以看見,它有一個轉換類型的參數,這里,它提供了24種轉換類型,我們只需指定轉換類型的代號,就可以讓圖片按特有的轉換效果進行轉換。下表就是24種轉換濾鏡的形式及其對應的代號:
顯示轉換濾鏡的轉換形式 | 所對應的代號 | 顯示轉換濾鏡的轉換形式 | 所對應的代號 | 矩形從大至小 | 0 | 隨機溶解 | 12 | 矩形從小至大 | 1 | 垂直向內裂開 | 13 | 圓形從大至小 | 2 | 垂直向外裂開 | 14 | 圓形從小至大 | 3 | 水平向內裂開 | 15 | 向上推開 | 4 | 水平向外裂開 | 16 | 向下推開 | 5 | 向左下剝開 | 17 | 向右推開 | 6 | 向左上剝開 | 18 | 向左推開 | 7 | 向右下剝開 | 19 | 垂直形百葉窗 | 8 | 向右上剝開 | 20 | 水平形百葉窗 | 9 | 隨機水平細紋 | 21 | 水平棋盤 | 10 | 隨機垂直細紋 | 22 | 垂直棋盤 | 11 | 隨機選取一種特效 | 23 | 大多數人在上網的時候,都會瀏覽網頁提供給我們的信息。
|