利用JAVASCRIPT實現網頁動態效果

山西 李貞

利用JAVASCRIPT實現網頁動態效果

山西 李貞

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

Javascript；網頁設計；動態特效

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

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

一、用Javascrip t實現網頁的彈出信息窗口

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

〈script language=“javascript”〉

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

〈/script〉

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

toolbar（是否顯示工具欄）、location（是否顯示地址欄）、directories（是否顯示常用鏈接）、status（是否顯示狀態欄）、menubar（是否顯示選單條）、scrollbars（是否使用滾動條）、resizable（是否可改變大小），以上的屬性值如果為1代表的是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實現字幕連續滾動的效果

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

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

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

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

＜/div＞

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

＜script language="java-script"＞

marqueesHeight=200;//滾動區的高度

stopscroll=false;//這個變量控制是否停止滾動

with(marquees){

noWrap=true;//

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

style.height=marqueesHeight;

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

onmouseover=new Function("stopscroll=true");//鼠標經過，停止滾動

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

}

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

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

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

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

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

while(templayer.offsetHeight＜marqueesHeight){

templayer.innerHTML+=marquees.innerHTML;

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

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

setInterval("scrollUp()",10);

}

document.body.onload=init;

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

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

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

preTop=marquees.scrollTop;//

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

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

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

if(preTop==marquees.scrollTop){

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

}

}

＜/script＞

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

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

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

（編輯 王旸）

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