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

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

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

1.引言

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

2.輪播圖

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

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

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

，

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

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

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

2.3 兩種方式的比較

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

3.選項(xiàng)卡

選項(xiàng)卡效果多用于門(mén)戶(hù)類(lèi)、交易類(lèi)、論壇類(lèi)等具有大量數(shù)據(jù)的網(wǎng)站，它可以為一個(gè)網(wǎng)頁(yè)節(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)容部分，無(wú)論有幾個(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è)控制是通過(guò)按鈕的點(diǎn)擊事件控制右側(cè)的CSS屬性display：block或display：none；來(lái)實(shí)現(xiàn)右側(cè)兩個(gè)盒子的出現(xiàn)與隱藏。而右側(cè)上方有5個(gè)按鈕，本實(shí)例是通過(guò).siblings（）來(lái)控制其他未被點(diǎn)擊到的按鈕的行為，使代碼更簡(jiǎn)潔。

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

4.下拉單

選項(xiàng)卡與下拉單一樣是為了節(jié)約空間為目的的，多用于門(mén)戶(hù)類(lèi)、交易類(lèi)、論壇類(lèi)等具有大量數(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)開(kāi)時(shí)顯示的部分；

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