jquery網(wǎng)頁開發(fā)實例精解教學-第8章設計圖片

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