jquery網(wǎng)頁(yè)開(kāi)發(fā)實(shí)例精解教學(xué)-第8章設(shè)計(jì)圖片

第8章設(shè)計(jì)圖片不管是靜態(tài)網(wǎng)頁(yè)還是動(dòng)態(tài)網(wǎng)頁(yè)，圖片都是傳達(dá)信息的主要載體。本章主要講解通過(guò)jQuery來(lái)實(shí)現(xiàn)圖片特效。8.1圖片切換jQuery對(duì)于圖片的應(yīng)用最常見(jiàn)的就是圖片切換效果的實(shí)現(xiàn)。圖片切換能夠節(jié)省網(wǎng)頁(yè)空間，給用戶呈現(xiàn)動(dòng)態(tài)效果。網(wǎng)頁(yè)上一般在表現(xiàn)圖片新聞時(shí)使用此技術(shù)。圖片切換的原理是利用jQuery的淡入或者自定義動(dòng)畫(huà)將待顯示的圖片覆蓋掉現(xiàn)在正在顯示的圖片。8.1.1利用淡入效果實(shí)現(xiàn)圖片切換圖片切換效果中淡入切換是最簡(jiǎn)單一種切換效果。圖片切換的原理是利用jQuery的淡入函數(shù)將待顯示的圖片替換掉現(xiàn)在正在顯示的圖片。其中，使用到的jQuery函數(shù)ready()、mouseover()、addClass()、siblings()、removeClass()、fadeIn()、attr()。其中，圖片淡入切換效果實(shí)現(xiàn)步驟：（1）為圖片中的編號(hào)添加鼠標(biāo)懸停事件。（2）在事件中將鼠標(biāo)停在的標(biāo)號(hào)設(shè)定為活動(dòng)狀態(tài)，其他標(biāo)號(hào)都為非活動(dòng)狀態(tài)。（3）在圖片區(qū)域?qū)?biāo)號(hào)所對(duì)應(yīng)的圖片用淡入效果替換掉原有圖片。首先，利用HTML創(chuàng)建兩個(gè)列表，一個(gè)是圖片列表，一個(gè)是圖片標(biāo)號(hào)列表，其中還有CSS樣式設(shè)定代碼參考光盤內(nèi)容。然后，引入jQuery庫(kù)文件：<scripttype="text/javascript"src="jslib/jquery-1.4.min.js"></script>最后加入Javascript功能代碼。效果如圖所示。8.1.2利用自定義動(dòng)畫(huà)切換圖片圖片切換效果中自定義動(dòng)畫(huà)切換是比較簡(jiǎn)單的一種切換效果。圖片切換的原理是利用jQuery的自定義動(dòng)畫(huà)函數(shù)將整個(gè)圖片列表在僅可顯示一幅圖片的區(qū)域內(nèi)調(diào)整底端的位置，每次調(diào)整一幅圖片的高度，這樣就可以在該有區(qū)域內(nèi)不斷更換圖片了。其中，使用到的jQuery函數(shù)ready()、mouseover()、index()、hover()、eq()、trigger()、height()、animate()、removeClass()、addClass()和Javascript函數(shù)clearInterval()、setInterval()。其實(shí)現(xiàn)的步驟如下：（1）設(shè)定圖片標(biāo)號(hào)的鼠標(biāo)懸停事件。（2）在事件中利用自定義動(dòng)畫(huà)函數(shù)調(diào)整顯示圖片，并修改對(duì)應(yīng)標(biāo)號(hào)樣式。（3）為圖片顯示區(qū)域設(shè)定鼠標(biāo)懸停事件。（4）當(dāng)鼠標(biāo)停在該區(qū)域，清除圖片切換動(dòng)畫(huà)定時(shí)器。（5）當(dāng)鼠標(biāo)離開(kāi)該區(qū)域，重起圖片切換動(dòng)畫(huà)，每隔2秒換一張圖片。首先，利用HTML創(chuàng)建兩個(gè)列表，一個(gè)是圖片列表一個(gè)是標(biāo)號(hào)列表，其中還有CSS樣式設(shè)定代碼參考光盤內(nèi)容。然后，引入jQuery庫(kù)文件：<scripttype="text/javascript"src="jslib/jquery-1.4.min.js"></script>最后加入Javascript功能代碼。效果如圖所示。8.2圖片滾動(dòng)圖片滾動(dòng)效果大體分為垂直滾動(dòng)和水平滾動(dòng)兩種。上一節(jié)第二種圖片切換其實(shí)就是一種垂直循環(huán)滾動(dòng)效果。在這里介紹水平滾動(dòng)效果。它的實(shí)現(xiàn)原理是利用jQuery的scrollLeft()函數(shù)不斷修改水平滾動(dòng)條的偏移量，使圖片相對(duì)原有位置發(fā)生偏移，產(chǎn)生滾動(dòng)效果。jQuery還有一個(gè)函數(shù)scrollTop()，它的作用是垂直滾動(dòng)。其中，使用到的jQuery函數(shù)ready()、html()、scrollLeft()、width()、hover()、和Javascript函數(shù)clearInterval()、setInterval()。1.jQuery的函數(shù)scrollLeft()——水平滾動(dòng)該函數(shù)返回或設(shè)置匹配元素的滾動(dòng)條的水平位置。其語(yǔ)法形式如下：語(yǔ)法形式一：scrollLeft()語(yǔ)法形式二：scrollLeft(position)2.功能實(shí)現(xiàn)（1）構(gòu)建滾動(dòng)區(qū)域，也就是定義滾動(dòng)條的距離；（2）設(shè)定滾動(dòng)區(qū)域的鼠標(biāo)懸停與離開(kāi)事件；（3）利用jQuery的scrollLeft()函數(shù)實(shí)現(xiàn)滾動(dòng)效果。首先，通過(guò)HTML將滾動(dòng)區(qū)域和圖片創(chuàng)建出來(lái)：然后，引入jQuery庫(kù)文件：<scripttype="text/javascript"src="jslib/jquery-1.6.js"></script>最后加入Javascript功能代碼。效果如圖所示，這里只是靜態(tài)效果，具體滾動(dòng)效果請(qǐng)讀者運(yùn)行光盤中代碼查看。8.3圖片動(dòng)態(tài)彈出圖片的彈出在很多商業(yè)網(wǎng)站上都被使用到，它主要作用是動(dòng)態(tài)展示產(chǎn)品外觀。因?yàn)楫a(chǎn)品圖片大小不一，全部圖片放在同一個(gè)頁(yè)面中顯示出來(lái)是一件很痛苦的事情。所以，我們可以先將圖片隱藏起來(lái)，等用戶需要顯示的時(shí)候再動(dòng)態(tài)彈出給用戶。它的實(shí)現(xiàn)原理很簡(jiǎn)單，利用了層的隱藏與顯示，將待顯示的圖片放在層上。如果層被隱藏則圖片不可見(jiàn)，當(dāng)某個(gè)事件觸發(fā)顯示了層，則圖片就有了彈出效果。其中，使用到的jQuery函數(shù)ready()、click()、css()、height()、width()、hide()、show()。1.功能實(shí)現(xiàn)（1）設(shè)定頁(yè)面中觸發(fā)圖片的彈出事件，這里使用了一個(gè)超鏈接的單擊事件。（2）在事件中設(shè)定圖片所在層需要顯示的位置，大小根據(jù)圖片自動(dòng)調(diào)整。（3）在圖片上還有一個(gè)小的關(guān)閉樣式的圖片，設(shè)定它的單擊事件。（4）在事件中隱藏圖片。首先，通過(guò)HTML將滾動(dòng)區(qū)域和圖片創(chuàng)建出來(lái)，樣式設(shè)定的CSS代碼請(qǐng)讀者參考光盤內(nèi)容。然后，引入jQuery庫(kù)文件：<scripttype="text/javascript"src="jslib/jquery-1.6.js"></script>最后加入Javascript功能代碼，效果如圖所示。8.4動(dòng)態(tài)圖文結(jié)合動(dòng)態(tài)圖文結(jié)合典型的應(yīng)用就是圖片上的文字提示功能，也就是當(dāng)鼠標(biāo)懸停在圖片上時(shí)動(dòng)態(tài)的出現(xiàn)文字提示效果。這種效果省去了在頁(yè)面上出現(xiàn)大段文字描述，是一種友好的用戶體驗(yàn)。它的實(shí)現(xiàn)原理是利用圖片的鼠標(biāo)懸停與離開(kāi)事件，當(dāng)鼠標(biāo)懸停在圖片上則跟隨鼠標(biāo)位置動(dòng)態(tài)顯示提示文字，當(dāng)鼠標(biāo)離開(kāi)圖片則提示文字所在的層隱藏。其中，使用到的jQuery函數(shù)ready()、mouseover()、mouseout()、append()、fadeIn()、fadeout()、css()。圖片動(dòng)態(tài)文字提示實(shí)現(xiàn)步驟：（1）通過(guò)Javascript向頁(yè)面中加入一個(gè)包含提示文字的隱藏層。（2）設(shè)定圖片的鼠標(biāo)懸停和離開(kāi)事件。（3）在鼠標(biāo)的懸停事件中顯示層并根據(jù)鼠標(biāo)位置定位。（4）在鼠標(biāo)離開(kāi)事件中隱藏層。首先，通過(guò)HTML圖片創(chuàng)建出來(lái)，樣式設(shè)定的CSS代碼請(qǐng)讀者參考光盤內(nèi)容。然后，引入jQuery庫(kù)文件。效果如圖所示。8.5圖片剪切圖片剪切主要是為了解決當(dāng)若干個(gè)圖片大小不一的情況下如何調(diào)整統(tǒng)一大小。圖片剪切不是縮小圖片大小，而是將圖片的部分截取下來(lái)。它的工作原理是：將圖片與顯示區(qū)域大小進(jìn)行對(duì)比，按照顯示區(qū)域大小截取相應(yīng)大小比例的圖片部分進(jìn)行顯示。其中，要使用到的jQuery函數(shù)ready()、parent()、height()、width()、css()。圖片剪切功能實(shí)現(xiàn)步驟：（1）獲取圖片的大小以及顯示區(qū)域大小。（2）比較圖片與顯示區(qū)域的大小，判斷是否全部顯示圖片。（3）根據(jù)比較結(jié)果將圖片的部分區(qū)域在顯示區(qū)域顯示。首先，通過(guò)HTML圖片創(chuàng)建出來(lái)，樣式設(shè)定的CSS代碼請(qǐng)讀者參考光盤內(nèi)容。然后，引入jQuery庫(kù)文件：<scripttype="text/javascript"src="jslib/jquery-1.6.js"></script>最后加入Javascript功能代碼。效果如圖所示。8.6圖片預(yù)覽在類似于淘寶的一些網(wǎng)站上會(huì)出現(xiàn)這么一種效果，頁(yè)面加載完成后顯示小圖片。但當(dāng)將鼠標(biāo)放在小圖片上時(shí)會(huì)出現(xiàn)相應(yīng)的大圖片，鼠標(biāo)從小圖片上移開(kāi)后大圖也隨之消失，這種效果我們就叫圖片預(yù)覽。它的實(shí)現(xiàn)原理就是利用鼠標(biāo)的懸停與移開(kāi)事件，在鼠標(biāo)懸停的時(shí)候?qū)㈦[藏的大圖片顯示出來(lái)，并跟隨鼠標(biāo)在小圖上移動(dòng)，鼠標(biāo)離開(kāi)小圖后，大圖繼續(xù)隱藏。其中，使用到的jQuery函數(shù)ready()、hover()、appendTo()、fadeIn()、remove()、mouseover()。圖片預(yù)覽實(shí)現(xiàn)步驟：（1）在小圖的鼠標(biāo)懸停事件中，添加大圖元素，并設(shè)定大圖的位置距鼠標(biāo)當(dāng)前位置有一定偏移，大圖淡入。（2）在小圖的鼠標(biāo)離開(kāi)事件中，移除大圖。首先，利用HTML創(chuàng)建小圖，并添加CSS樣式設(shè)定，具體代碼請(qǐng)參考光盤內(nèi)容。然后，引入jQuery庫(kù)文件：<scripttype="text/javascript"src="jslib/jquery-1.6.js"></script>最后加入Javascript功能代碼。效果如圖所示。8.7圖片局部平移圖片局部平移也是經(jīng)常出現(xiàn)在一些商業(yè)性網(wǎng)站中的圖片效果，如京東商城。這種效果主要是在原始圖片較大，并且直接在頁(yè)面顯示的時(shí)候影響頁(yè)面布局與美觀，但用戶對(duì)小圖片又無(wú)法看清的情況下使用。它的實(shí)現(xiàn)原理是：通過(guò)在小圖設(shè)定鼠標(biāo)的懸停事件中獲取鼠標(biāo)的位置，并按照一定比例裁減原大圖的部分內(nèi)容，在固定的層上進(jìn)行顯示，當(dāng)鼠標(biāo)離開(kāi)時(shí)層取消。其中，使用到的jQuery函數(shù)ready()、hover()、get()、attr()、after()、css()、width()、height()、show()、mouseover()、hide()、unbind()、remove()。圖片平移實(shí)現(xiàn)步驟：（1）設(shè)定小圖的鼠標(biāo)懸停與離開(kāi)事件。（2）在鼠標(biāo)懸停事件中向頁(yè)面添加顯示圖片局部?jī)?nèi)容的層，在層上加載大圖。（3）在鼠標(biāo)懸停事件中添加頁(yè)面的鼠標(biāo)移動(dòng)事件，在這個(gè)事件中判斷鼠標(biāo)在小圖的位置并改變層對(duì)于滾動(dòng)條的偏移量，已到達(dá)顯示大圖不同位置的效果。（4）在鼠標(biāo)離開(kāi)事件中撤消層的顯示，并撤消頁(yè)面的鼠標(biāo)移動(dòng)事件。首先，利用HTML創(chuàng)建小圖，并添加CSS樣式設(shè)定，具體代碼請(qǐng)參考光盤內(nèi)容。然后，引入jQuery庫(kù)文件：<scripttype="text/javascript"src="jslib/jquery-1.6.js"></script>最后加入Javascript功能代碼。效果如圖所示。8.8圖片插件前面講解了部分通過(guò)jQuery實(shí)現(xiàn)的圖片效果。因?yàn)閳D片是網(wǎng)頁(yè)中的基本元素之一，所以關(guān)于它的插件也比較多。下面介紹三種關(guān)于圖片的插件供讀者參考。8.8.1MobilyNotes插件MobilyNotes是一個(gè)輕量級(jí)的jQuery插件（只有2KB），可以堆疊的形式顯示其圖片集或者HTML內(nèi)容集。這個(gè)插件的特點(diǎn)：（1）循環(huán)顯示內(nèi)容；（2）自動(dòng)播放；（3）自動(dòng)產(chǎn)生按鈕。首先，使用HTML來(lái)創(chuàng)建頁(yè)面，CSS代碼和插件代碼請(qǐng)參考光盤內(nèi)容。然后，引入jQuery庫(kù)文件：<scriptsrc="js/jquery.js"type="text/javascript"></script>最后通過(guò)Javascript功能代碼講解這個(gè)插件的使用。效果如圖所示。8.8.2Fancybox插件Fancybox是一個(gè)浮動(dòng)展示放大圖片的插件。它可以設(shè)定浮動(dòng)層出現(xiàn)圖片、HTML內(nèi)容，多媒體也可以在同一個(gè)浮動(dòng)層瀏覽多張圖片，還可以設(shè)定浮動(dòng)層出現(xiàn)的不同動(dòng)畫(huà)效果。這個(gè)插件的特點(diǎn)：（1）可以顯示多種元素，如圖片、HTML內(nèi)容，多媒體、AJAX請(qǐng)求內(nèi)容；（2）自由定制CSS樣式；（3）相關(guān)項(xiàng)目分組和添加導(dǎo)航；（4）可以添加鼠標(biāo)滾輪相應(yīng)功能；（5）支持多種轉(zhuǎn)換；（6）具有完美的浮動(dòng)層陰影。插件相關(guān)參數(shù)如表所示。插件相關(guān)函數(shù)如表所示。8.8.3desSlideshow插件這個(gè)插件是一個(gè)圖片輪播展示插件，它支持自動(dòng)輪播和手動(dòng)選擇。下面通過(guò)一個(gè)例子來(lái)講解這個(gè)插件的使用。首先，建立靜態(tài)頁(yè)面，HTM