基于Javascript的網(wǎng)頁特效技術(shù)研究

李林 王揚(yáng)揚(yáng) 李濤

【摘 要】本文研究用JavaScript語言實(shí)現(xiàn)網(wǎng)頁特效，對(duì)輪播圖、選項(xiàng)卡、模態(tài)窗口等動(dòng)態(tài)效果的代碼寫法、特點(diǎn)進(jìn)行了詳細(xì)討論。運(yùn)用合適的網(wǎng)頁特效能提高視覺效果，更好的實(shí)現(xiàn)用戶與頁面的交互。

【關(guān)鍵詞】網(wǎng)頁特效，HTML，JavaScript

1.引言

隨著互聯(lián)網(wǎng)的發(fā)展，網(wǎng)頁的表現(xiàn)方式從最早的靜態(tài)網(wǎng)頁發(fā)展到現(xiàn)在的絢麗多彩、充滿互動(dòng)性的網(wǎng)頁，人們?cè)絹碓阶非笠曈X上的享受。單純的HTML語言呈現(xiàn)出的網(wǎng)頁效果太單一，因此各種網(wǎng)頁特效處理技術(shù)，作為HTML語言的補(bǔ)充應(yīng)運(yùn)而生。JS是目前運(yùn)用最廣泛的網(wǎng)頁特效處理技術(shù)。

2.輪播圖

輪播圖是展現(xiàn)圖片的一種動(dòng)態(tài)效果，在門戶類、交易類、娛樂類網(wǎng)站中經(jīng)常都能使用到。本實(shí)例是帶縮略圖的輪播圖，要表現(xiàn)出的效果是大圖部分每隔3秒會(huì)自動(dòng)切換到下一副圖片，同時(shí)縮略圖與大圖對(duì)應(yīng)切換。當(dāng)鼠標(biāo)移到大圖上時(shí)，圖片停止切換，鼠標(biāo)移走切換開始。左右有兩個(gè)箭頭可控制上一副與下一副的切換。點(diǎn)擊縮略圖，大圖切換到對(duì)應(yīng)縮略圖。

2.1 第一種實(shí)現(xiàn)方式

HTML中使用列表標(biāo)簽

，

中存放需要輪播的圖片，使用CSS樣式使

左浮動(dòng)，最重要的是給存放輪播圖的最大父盒子添加CSS樣式overflow：hidden，使超出父盒子的部分隱藏。

這種方式是通過改變需輪播的圖片左邊距離父盒子最左邊的距離的值來實(shí)現(xiàn)圖片滾動(dòng)效果，以每幅需輪播的圖寬作為一個(gè)單位，需要注意的是JS中不會(huì)自動(dòng)獲取圖片的寬度與圖片的數(shù)量，每次使用時(shí)需要手動(dòng)更改這兩個(gè)元素的值。

2.2 第二種實(shí)現(xiàn)方式

HTML和CSS設(shè)置方式同第一種實(shí)現(xiàn)方式一致。這種方式同樣也是通過改變改變需輪播的圖片左邊距離父盒子最左邊的距離的值來實(shí)現(xiàn)圖片滾動(dòng)效果，但JQ代碼中因自動(dòng)獲取了大圖的寬度witch與圖片數(shù)量，因此在使用時(shí)可不更改JQ，只用設(shè)置好HTML與CSS然后導(dǎo)入JS代碼就行了。

2.3 兩種方式的比較

第二種JS特效寫法明顯優(yōu)于第一種寫法，代碼使用起來簡單方便。但是由于第二種寫法中用了許多JS的方法，若要增減一些功能改動(dòng)性較大，對(duì)JQ語言熟悉度要高。而第一種寫法基本上是用算法的方式，每次使用只需改變2個(gè)值，增減功能時(shí)更易于操作。

3.選項(xiàng)卡

選項(xiàng)卡效果多用于門戶類、交易類、論壇類等具有大量數(shù)據(jù)的網(wǎng)站，它可以為一個(gè)網(wǎng)頁節(jié)省空間以存放大量信息。本實(shí)例要表現(xiàn)出的效果是點(diǎn)擊左側(cè)按鈕對(duì)應(yīng)右側(cè)內(nèi)容會(huì)切換。點(diǎn)擊右側(cè)上方按鈕，右側(cè)下方內(nèi)容會(huì)切換。

HTML中設(shè)置好了兩個(gè)按鈕后，在一塊空白位置放置選項(xiàng)卡內(nèi)容部分，無論有幾個(gè)選項(xiàng)卡內(nèi)容都放在這個(gè)位置，它們疊加在一起。注意設(shè)置這塊內(nèi)容部分的CSS樣式為絕對(duì)定位position：absolute；相對(duì)定位posi：reletive；設(shè)置給存放選項(xiàng)卡的父盒子。給需要隱藏的內(nèi)容設(shè)置CSS樣式display：none。

這種效果的左側(cè)控制是通過按鈕的點(diǎn)擊事件控制右側(cè)的CSS屬性display：block或display：none；來實(shí)現(xiàn)右側(cè)兩個(gè)盒子的出現(xiàn)與隱藏。而右側(cè)上方有5個(gè)按鈕，本實(shí)例是通過.siblings（）來控制其他未被點(diǎn)擊到的按鈕的行為，使代碼更簡潔。

選項(xiàng)卡效果用于頁面同一位置需要顯示多種分類別的內(nèi)容，使要展現(xiàn)出的內(nèi)容在很小的一塊位置充分展現(xiàn)，動(dòng)態(tài)效果不跳躍很連貫。

4.下拉單

選項(xiàng)卡與下拉單一樣是為了節(jié)約空間為目的的，多用于門戶類、交易類、論壇類等具有大量數(shù)據(jù)的網(wǎng)站。本實(shí)例要表現(xiàn)出的效果是點(diǎn)擊標(biāo)題欄，內(nèi)容部分出現(xiàn)，再次點(diǎn)擊，內(nèi)容部分隱藏。

HTML中使用列表標(biāo)簽

，

中存放標(biāo)題部分，即為點(diǎn)開時(shí)顯示的部分；

中存放下拉單中的內(nèi)容。給標(biāo)簽設(shè)置CSS樣式display：none即隱藏，通過JQ的點(diǎn)擊