網(wǎng)頁特效設(shè)計(jì)基礎(chǔ)第12章-綜合實(shí)戰(zhàn)——使用jQuery-實(shí)現(xiàn)攜程網(wǎng)站特效

1、jQuery網(wǎng)頁特效設(shè)計(jì)基礎(chǔ)教程（慕課版）劉剛 主編新一代信息技術(shù)“十三五”系列規(guī)劃教材 第12章 綜合實(shí)戰(zhàn)使用jQuery 實(shí)現(xiàn)攜程網(wǎng)站特效 本章要點(diǎn)： 網(wǎng)頁開發(fā)前如何擬定系統(tǒng)目標(biāo)及功能結(jié)構(gòu) 如何使用jQuery技術(shù)實(shí)現(xiàn)廣告循環(huán)播放的網(wǎng)頁特效 如何使用Ajax技術(shù)實(shí)現(xiàn)信息滾動(dòng)顯示效果 如何使用JavaScript制作導(dǎo)航菜單、浮動(dòng)窗口等 本章我們主要使用 jQuery 技術(shù)來實(shí)現(xiàn)攜程網(wǎng)站上有代表性、通用性的特效，來深入講解 jQuery 技術(shù)在實(shí)際項(xiàng)目中的運(yùn)用。12.1 網(wǎng)站特效 攜程網(wǎng)站是中國領(lǐng)先的一家旅游網(wǎng)站，在這家網(wǎng)站上可以選擇酒店、旅游、機(jī)票、火車、汽車、用車、門票等服務(wù)。該網(wǎng)站上有

2、很多特效，我們選取一些常用的、有代表性的特效，比如注冊(cè)表單校驗(yàn)、60s 倒計(jì)時(shí)、登錄兩種方式切換選擇、導(dǎo)航菜單、海報(bào)輪播、菜單懸浮、圖片放大等，介紹使用 jQuery 來實(shí)現(xiàn)這些通用功能的方法，以加深讀者對(duì)使用 jQuery 的理解。12.2 特效需求12.2.1 網(wǎng)站注冊(cè)表單布局設(shè)計(jì) 需求：攜程網(wǎng)站用戶注冊(cè)表單填寫部分需要對(duì)填寫的表單項(xiàng)進(jìn)行校驗(yàn)，如圖 12-1 所示。圖 12-1 網(wǎng)站注冊(cè)12.2.2 倒計(jì)時(shí)交互設(shè)計(jì) 需求：倒計(jì)時(shí)交互設(shè)計(jì)是使用非常頻繁的一個(gè)交互設(shè)計(jì)，獲取手機(jī)驗(yàn)證碼或者郵箱驗(yàn)證碼時(shí)都會(huì)用到這個(gè)交互，如圖 12-2 所示。圖 12-2 倒計(jì)時(shí)交互12.2.3 網(wǎng)站登錄布局與交互

3、設(shè)計(jì) 需求：網(wǎng)站登錄提供兩種登錄方式，一種是手機(jī)登錄，另一種是手機(jī)動(dòng)態(tài)密碼登錄，實(shí)現(xiàn)兩種登錄方式的切換效果，如圖 12-3、圖 12-4 所示。圖 12-3 普通登錄 圖 12-4 手機(jī)動(dòng)態(tài)密碼登錄12.2.4 導(dǎo)航菜單設(shè)計(jì) 需求：實(shí)現(xiàn)導(dǎo)航一級(jí)菜單和二級(jí)菜單聯(lián)動(dòng)效果，如圖 12-5 所示。圖 12-5 導(dǎo)航菜單12.2.5 海報(bào)輪播效果設(shè)計(jì) 需求：在攜程網(wǎng)站首頁里，會(huì)采用海報(bào)輪播效果展現(xiàn)廣告信息，可以在有限的區(qū)域內(nèi)展示不同的廣告信息，這也是海報(bào)輪播的特色，如圖 12-6 所示。圖 12-6 輪播效果12.2.6 頁簽切換效果設(shè)計(jì) 需求：在攜程網(wǎng)站的搜索區(qū)域里可以對(duì)國內(nèi)酒店、海外酒店、酒店團(tuán)購等

4、進(jìn)行搜索，實(shí)現(xiàn)這些頁簽的切換效果，如圖 12-7、圖 12-8 所示。圖 12-7 選中國內(nèi)酒店圖 12-8 選中海外酒店12.2.7 左右滑動(dòng)效果設(shè)計(jì) 需求：航空公司特惠專區(qū)可以實(shí)現(xiàn)航空信息左右滑動(dòng)，如圖 12-9、圖 12-10 所示。圖 12-9 滑動(dòng) 1圖 12-10 滑動(dòng) 212.2.8 手風(fēng)琴效果設(shè)計(jì) 需求：縱向菜單可以實(shí)現(xiàn)手風(fēng)琴效果，這也是很多網(wǎng)站經(jīng)常會(huì)采用的一種設(shè)計(jì)方式，如圖 12-11 所示。圖 12-11 手風(fēng)琴菜單12.2.9 圖片放大縮小效果制作 需求：在攜程網(wǎng)站首頁里，有很多旅游廣告圖片或者酒店廣告圖片，當(dāng)鼠標(biāo)指針移入這些圖片的時(shí)候，這些圖片會(huì)放大，移出的時(shí)候圖片又會(huì)

5、縮小?，F(xiàn)在很多的電商網(wǎng)站也是采用這樣的方式來給商品圖片添加交互效果，通過放大縮小交互動(dòng)作使圖片動(dòng)起來，如圖 12-12 所示。圖 12-12 特賣匯圖片12.3 關(guān)鍵知識(shí)點(diǎn) 本章主要使用了 jQuery 技術(shù)，下面我們就對(duì)本章中用到的這幾種關(guān)鍵技術(shù)點(diǎn)進(jìn)行簡單介紹。（1）控制頁面元素顯示與隱藏$(#div1).show(); $(#div1).hide(); （2）頁面元素添加樣式phone.css(borderColor,#67a1e2); （3）頁面顯示文本內(nèi)容prompt1.text(手機(jī)號(hào)格式不正確); （4）輸入框光標(biāo)聚焦事件phone.focus(function() （5）輸入框光

6、標(biāo)離開事件pwd.blur(function()（6）設(shè)置定時(shí)任務(wù)setTimeout(function() settime(obj) ,1000) （7）元素查找 eq 相等事件$(.tab-boxdiv).eq(_index).show().siblings().hide(); $(#login1-2 label).eq(_index).addClass(ons).siblings().removeClass(ons);（8）mouseover 鼠標(biāo)指針懸浮事件$(.xc_d1_1_1 li).mouseover(function() var _index = $(this).index(

7、); $(.tab-boxdiv).eq(_index).show().siblings().hide(); ); （9）元素添加樣式和移出樣式$(this).addClass(l_hover); /指向li添加樣式 $(this).removeClass(l_hover); /指向li刪除樣式 （10）元素點(diǎn)擊事件$li.click(function();12.4 模塊設(shè)計(jì)實(shí)現(xiàn)12.4.1 網(wǎng)站注冊(cè)表單布局設(shè)計(jì) 模塊設(shè)計(jì)實(shí)現(xiàn)攜程旅游網(wǎng)站的注冊(cè)表單是一個(gè)向?qū)捅韱危?cè)分為 3 個(gè)步驟：填寫、驗(yàn)證、注冊(cè)成功。注冊(cè)表單內(nèi)容包含手機(jī)號(hào)、Email、密碼、確認(rèn)密碼等表單項(xiàng)，提交表單時(shí)要進(jìn)行表單驗(yàn)證，

8、如圖 12-13、 圖 12-14 所示。圖 12-13 表單布局設(shè)計(jì) 實(shí)例運(yùn)行效果如圖 12-15 所示。圖 12-15 表單布局設(shè)計(jì)與校驗(yàn)12.4.2 倒計(jì)時(shí)交互設(shè)計(jì) 在攜程旅游網(wǎng)站填寫完注冊(cè)表單后，會(huì)進(jìn)行驗(yàn)證，有兩種驗(yàn)證方式，一種是手機(jī)號(hào)驗(yàn)證，另一種是郵箱驗(yàn)證。如果沒有填寫手機(jī)號(hào)會(huì)進(jìn)入郵箱驗(yàn)證頁面進(jìn)行驗(yàn)證，郵箱驗(yàn)證時(shí)會(huì)有倒計(jì)時(shí)交互效果，如果在規(guī)定時(shí)間內(nèi)沒有輸入驗(yàn)證碼，可以重新獲取驗(yàn)證碼，如圖 12-16 所示。圖 12-16 倒計(jì)時(shí)交互設(shè)計(jì) 實(shí)例運(yùn)行效果如圖 12-17 所示。圖 12-17 倒計(jì)時(shí)交互設(shè)計(jì)效果12.4.3 網(wǎng)站登錄布局與交互設(shè)計(jì)攜程旅游網(wǎng)站提供了兩種登錄方式，一種是普通

9、登錄，另一種是手機(jī)動(dòng)態(tài)密碼登錄，兩種登錄方式通過兩種不同的按鈕控制不同登錄表單的顯示，如圖 12-18、圖 12-19 所示。圖 12-18 普通登錄 圖 12-19 手機(jī)動(dòng)態(tài)密碼登錄 實(shí)例運(yùn)行效果如圖 12-20 所示。圖 12-20 網(wǎng)站登錄布局與交互12.4.4 導(dǎo)航菜單設(shè)計(jì) 攜程旅游網(wǎng)站導(dǎo)航菜單有很多內(nèi)容，一級(jí)導(dǎo)航菜單有首頁、酒店、旅游、機(jī)票、火車、汽車票等，每個(gè)一級(jí)導(dǎo)航菜單下面有對(duì)應(yīng)的二級(jí)導(dǎo)航菜單，比如一級(jí)菜單酒店下面對(duì)應(yīng)的二級(jí)菜單有國內(nèi)酒店、海外酒店、團(tuán)購等，如圖 12-21 所示。圖 12-21 導(dǎo)航菜單 實(shí)例運(yùn)行效果如圖 12-22 所示。圖 12-22 導(dǎo)航菜單12.4.5

10、海報(bào)輪播效果制作 在網(wǎng)站首頁中，我們制作海報(bào)輪播的效果來展現(xiàn)廣告信息，如圖 12-23 所示。圖 12-23 海報(bào)輪播區(qū)域 實(shí)例運(yùn)行效果如圖 12-24 所示。圖 12-24 海報(bào)輪播效果12.4.6 頁簽切換效果設(shè)計(jì) 在攜程網(wǎng)站搜索區(qū)域里可以對(duì)國內(nèi)酒店、海外酒店、酒店團(tuán)購等進(jìn)行搜索，如圖 12-25 所示。圖 12-25 國內(nèi)酒店選中 實(shí)例運(yùn)行效果如圖 12-26 所示。圖 12-26 頁簽切換效果12.4.7 左右滑動(dòng)切換效果設(shè)計(jì) 攜程網(wǎng)站里有用來展示航空公司特惠的專區(qū)內(nèi)容，由于特價(jià)航空有很多，在一個(gè)區(qū)域里無法顯示所有內(nèi)容，這時(shí)可以采用左右滑動(dòng)切換效果來動(dòng)態(tài)展示特價(jià)航空信息，如圖 12-2

11、7、圖 12-28 所示。圖 12-27 特價(jià)航空 1圖 12-28 特價(jià)航空 2 實(shí)例運(yùn)行效果如圖 12-29 所示。圖 12-29 特價(jià)航空左右滑動(dòng)12.4.8 手風(fēng)琴效果菜單設(shè)計(jì) 手風(fēng)琴效果菜單是很多電商網(wǎng)站會(huì)采用的一種布局方式，如果產(chǎn)品類目眾多，又想讓用戶很直觀地看到想要的產(chǎn)品，這時(shí)選用手風(fēng)琴效果菜單是一種不錯(cuò)的選擇，進(jìn)行縱向菜單設(shè)計(jì)時(shí)可以考慮手風(fēng)琴效果菜單，如圖12-30 所示。圖 12-30 手風(fēng)琴效果菜單 實(shí)例運(yùn)行效果如圖 12-31 所示。圖 12-31 手風(fēng)琴效果切換菜單12.4.9 圖片放大縮小效果制作 本節(jié)我們制作圖片的放大縮小效果，讓圖片動(dòng)起來，產(chǎn)生交互效果，如圖 12-32 所示。圖 12-32 特賣匯圖片 實(shí)例運(yùn)行效果如圖 12-33 所示。圖 12-33 圖片放大縮小12.5 本章總結(jié)