山西 李貞

利用JAVASCRIPT實現(xiàn)網頁動態(tài)效果

山西 李貞

要想使網頁設計得與眾不同，添加一些實用的網頁特效很有必要。本文結合實例詳細地介紹了如何利用javascript來制作網頁特效實現(xiàn)一些動態(tài)效果。

Javascript；網頁設計；動態(tài)特效

當今是個互聯(lián)網高速發(fā)展的網絡時代，在網上要建立一個主頁是很容易的，但要使自己的主頁擁有一定的訪問量卻比較困難，當然各種形式的網站推廣工作是必要的，而最關鍵的卻在于你的主頁是不是能吸引住瀏覽者，要想使網頁做得與眾不同，添加一些精彩的網頁特效則很有必要了。所謂的網頁特效就是用程序代碼在網頁中實現(xiàn)的特殊效果或者特殊的功能的一種技術，簡而言之就是用網頁腳本語言來編寫制作動態(tài)的一些特殊的顯示效果。

Javascript就是這樣一種網頁腳本語言，它用于開發(fā)基于客戶端和服務器的Internet應用程序，旨在使網頁開發(fā)人員能對網頁的功能進行管理和控制。Javascript代碼可以嵌入到HTML文檔中，控制頁面的內容和驗證用戶輸入的數據。當頁面顯示在瀏覽器中時，瀏覽器將解釋并執(zhí)行Javascript語句。Javascript的功能十分強大，可以實現(xiàn)多種任務，如執(zhí)行計算、檢查表單、編寫游戲、添加特效、創(chuàng)建安全密碼等等，所有這些功能都有助于增強站點的動態(tài)效果和交互性，其中，利用Javascript在網頁中添加特效的應用已經非常廣泛了，利用它可以做出很多很精彩的動態(tài)效果。下面通過兩個實例來詳細介紹：

一、用Javascrip t實現(xiàn)網頁的彈出信息窗口

在網上沖浪時有時會發(fā)現(xiàn)有一些網頁在打開或關閉的時候，會彈出一個較小的窗口，里面通常會顯示一些類似問候語或宣傳標語等的信息。如果想要實現(xiàn)這樣的效果，只需在該網頁代碼的〈body〉標簽后面插入下面的代碼就可以了：

〈script language=“javascript”〉

window.open(‘url’,‘窗口名稱’,‘屬性列表’);

〈/script〉

第二行中的“url”是要在窗口中顯示的網頁的來源，也就是網頁的地址；“窗口名稱”的起名要用非中文；“屬性列表”中可以是各個屬性值（外觀與狀態(tài)），中間用逗號分開。其中經常會用到的屬性有：

toolbar（是否顯示工具欄）、location（是否顯示地址欄）、directories（是否顯示常用鏈接）、status（是否顯示狀態(tài)欄）、menubar（是否顯示選單條）、scrollbars（是否使用滾動條）、resizable（是否可改變大?。陨系膶傩灾等绻麨?代表的是true，為0或列表中沒有此屬性代表的是false。還有一些屬性是對彈出信息窗口的大小和位置進行控制的，如：width、height、top、left。

如果要在網頁中制作一個彈出信息窗口，顯示的是網頁tcxxck.htm的內容，其屬性如下：高200像素、寬200像素、有地址欄、有滾動條、不可改變大小，只需改第二行代碼為：“window.open(‘tcxxck.htm’,‘w1’,‘height=200,width=200,location=1,scrollbars=1,resizable=0’);”。

二、用Javascrip t實現(xiàn)字幕連續(xù)滾動的效果

在網頁制作中控制元素的滾動要用到一個標簽------Marquee。添加上Marquee標簽制作好的滾動元素，在一般情況下滾動完一次后，會出現(xiàn)一片空白的地方，也就是看起來不是連續(xù)的滾動效果。那么怎樣才能制作出毫不間斷、連續(xù)滾動的字幕效果呢？想要實現(xiàn)連續(xù)滾動，就必須將要滾動的字幕內容一遍一遍地進行復制，直到復制后的內容高度超出滾動區(qū)域的高度的兩倍，接著再隱藏掉溢出的滾動條，用代碼控制滾動條向下移動(這時內容將向上移動)。當滾動條滾動到最下面的時候，再調整滾動條，將它向上滾動到和當前一樣的位置，在瀏覽器當中預覽時我們就會看到連續(xù)的字幕滾動了。下面看看是如何逐步實現(xiàn)的：

＜div id="marquees"＞＜!--這里是滾動區(qū)中的字幕的內容，可以任意定義--＞

＜a href="#"＞ 鏈接＜/a＞

＜br＞＜!--字幕內容結束--＞

＜/div＞

＜!--以下是java-script代碼--＞

＜script language="java-script"＞

marqueesHeight=200;//滾動區(qū)的高度

stopscroll=false;//這個變量控制是否停止?jié)L動

with(marquees){

noWrap=true;//

style.width=0;//寬度設為0

style.height=marqueesHeight;

style.overflowY="hidden";//滾動條不可見

onmouseover=new Function("stopscroll=true");//鼠標經過，停止?jié)L動

onmouseout=new Function("stopscroll=false");//鼠標離開，開始滾動

}

//這時候的滾動區(qū)的高度已經看不出來了。一會將字幕的內容復制到下面輸出的一個不可見的層"templayer"里面：

document.write('＜div id="templayer"

style="position:absolute;z-index:1;visibility:hidden"＞＜/div＞');

function init(){//初始化滾動內容

//將字幕內容多次進行復制到"templayer"，直到復制后的內容高度超出滾動區(qū)域的高度：

while(templayer.offsetHeight＜marqueesHeight){

templayer.innerHTML+=marquees.innerHTML;

}//把"templayer"的內容的“兩倍”復制回原內容區(qū)：

marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;

setInterval("scrollUp()",10);

}

document.body.onload=init;

preTop=0;//此變量是用來確定滾動條是否不能再滾動

function scrollUp(){//滾動條的驅動函數

if(stopscroll==true)return;//如果變量"stopscroll"為真，則停止?jié)L動

preTop=marquees.scrollTop;//

marquees.scrollTop+=1;//滾動條向下移動一個像素

//當滾動條不能再滾動了，則向上滾動到和當前一樣的位置

//當然不僅如此，同樣還要向下滾動一個像素(+1)：

if(preTop==marquees.scrollTop){

marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;

}

}

＜/script＞

以上的實例中可根據需要的具體情況自行調整相應的語句和相關的屬性，從而做出不同的特效。利用Javascript可以制作出的網頁特效還有很多，比如實現(xiàn)網頁背景色的變幻、頁面百葉窗切換、文字的打印效果、動態(tài)的鼠標指針等等，但是要注意一個原則，那就是網頁的實用性和可行性，網頁是藝術與技術相結合的產物，不要一味的添加很多不必要的特效，這樣頁面不僅會很亂，而且容易使瀏覽者產生厭煩情緒?？傊行У乩肑avascript實現(xiàn)網頁特效，使你制作出的網頁“動”靜結合，“變”化莫測。

[1]劉瑞新，張兵義，馮柯編著.網頁設計與制作教程.機械工業(yè)出版社，2005.

[2]姜玉潔，張楠，戴毅君等編著.網頁制作教程.機械工業(yè)出版社，2007.2.

（編輯 王旸）

(作者單位：晉中職業(yè)技術學院信息技術系)