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

山西 李貞

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

山西 李貞

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

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

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

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

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

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

〈script language=“javascript”〉

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

〈/script〉

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

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

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

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

在網(wǎng)頁制作中控制元素的滾動要用到一個標簽------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");//鼠標經(jīng)過，停止?jié)L動

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

}

//這時候的滾動區(qū)的高度已經(jīng)看不出來了。一會將字幕的內容復制到下面輸出的一個不可見的層"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(){//滾動條的驅動函數(shù)

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＞

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

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

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

（編輯 王旸）

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