第12章 jQuery動(dòng)畫與UI插件_第1頁(yè)
第12章 jQuery動(dòng)畫與UI插件_第2頁(yè)
第12章 jQuery動(dòng)畫與UI插件_第3頁(yè)
第12章 jQuery動(dòng)畫與UI插件_第4頁(yè)
第12章 jQuery動(dòng)畫與UI插件_第5頁(yè)
已閱讀5頁(yè)，還剩32頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

高等學(xué)校規(guī)劃教材Web前端開發(fā)實(shí)例教程（第2版）——HTML5+CSS3+JavaScript+jQuery第12章jQuery動(dòng)畫與UI插件目錄12.1jQuery的動(dòng)畫方法簡(jiǎn)介12.2顯示與隱藏效果12.3淡入淡出效果12.4滑動(dòng)效果12.5jQueryUI簡(jiǎn)介12.6jQueryUI的常用插件12.1jQuery的動(dòng)畫方法簡(jiǎn)介12.1jQuery的動(dòng)畫方法簡(jiǎn)介 jQuery的動(dòng)畫方法分為4類?；緞?dòng)畫方法：既有透明度漸變，又有滑動(dòng)效果，是常用的動(dòng)畫效果方法。滑動(dòng)動(dòng)畫方法：僅適用滑動(dòng)漸變動(dòng)畫效果。淡入淡出動(dòng)畫方法：僅適用透明度漸變動(dòng)畫效果。自定義動(dòng)畫方法：作為上述三種動(dòng)畫方法的補(bǔ)充和擴(kuò)展。12.2顯示與隱藏效果12.2.1隱藏元素的方法12.2.2顯示元素的方法12.2.1隱藏元素的方法 hide()方法用于隱藏頁(yè)面中可見的元素。有兩種語(yǔ)法格式。 1．格式一hide() 2．格式二 格式二是帶參數(shù)的形式，用于以優(yōu)雅的動(dòng)畫隱藏所有匹配的元素，并在隱藏完成后可選擇地觸發(fā)一個(gè)回調(diào)函數(shù)，格式如下：hide(speed,[callback])12.2.2顯示元素的方法 show()方法用于顯示頁(yè)面中隱藏的元素。有兩種語(yǔ)法格式。 1．格式一show() 2．格式二 格式二是帶參數(shù)形式，用于以優(yōu)雅的動(dòng)畫顯示所有匹配的元素，并在顯示完成后可選擇地觸發(fā)一個(gè)回調(diào)函數(shù)，語(yǔ)法格式如下：show(speed,[callback])12.2.2顯示元素的方法 【例12-1】顯示與隱藏動(dòng)畫效果示例。12.3淡入淡出效果12.3.1淡入效果12.3.2淡出效果12.3.3元素的不透明效果12.3.4交替淡入淡出效果12.3.1淡入效果 fadeIn()方法用于淡入顯示已隱藏的元素。與show()方法不同的是，fadeIn()方法只是改變?cè)氐牟煌该鞫龋摲椒〞?huì)在指定的時(shí)間內(nèi)提高元素的不透明度，直到元素完全顯示。 其語(yǔ)法格式如下：fadeIn(speed,callback)12.3.2淡出效果 jQuery中的fadeOut()方法用于淡出可見元素。格式如下：fadeOut(speed,callback)【例12-2】淡入與淡出效果示例。12.3.3元素的不透明效果

fadeTo()方法可以把元素的不透明度以漸進(jìn)方式調(diào)整到指定的值。這個(gè)動(dòng)畫效果只是調(diào)整了元素的不透明度，而匹配元素的高度和寬度不會(huì)發(fā)生變化。該方法的基本語(yǔ)法格式如下：fadeTo(speed,opacity,callback)12.3.4交替淡入淡出效果

jQuery中的fadeToggle()方法可以在fadeIn()與fadeOut()方法之間進(jìn)行切換。如果元素已淡出，則fadeToggle()會(huì)向元素添加淡入效果。如果元素已淡入，則fadeToggle()會(huì)向元素添加淡出效果。fadeToggle()方法的基本語(yǔ)法格式如下：fadeToggle(speed,callback)12.4滑動(dòng)效果12.4.1向下展開效果12.4.2向上收縮效果12.4.3交替伸縮效果12.4.1向下展開效果

jQuery中提供了slideDown()方法用于向下滑動(dòng)元素，該方法通過(guò)使用滑動(dòng)效果，將逐漸顯示隱藏的被選元素，直到元素完全顯示為止，在顯示元素后觸發(fā)一個(gè)回調(diào)函數(shù)。

該方法實(shí)現(xiàn)的效果適用于通過(guò)jQuery隱藏的元素，或者在CSS中聲明display:none的元素。其語(yǔ)法格式如下：slideDown(speed,[callback])12.4.2向上收縮效果

jQuery中的slideUp()方法用于向上滑動(dòng)元素，從而實(shí)現(xiàn)向上收縮效果，直到元素完全隱藏為止。該方法實(shí)際上是改變?cè)氐母叨?，如果?yè)面中一個(gè)元素的display屬性值為none，則當(dāng)調(diào)用slideUp()方法時(shí)，元素將由下到上縮短顯示。其語(yǔ)法格式如下：$(selector).slideUp(speed,callback)12.4.3交替伸縮效果

jQuery中的slideToggle()方法通過(guò)使用滑動(dòng)效果（高度變化）來(lái)切換元素的可見狀態(tài)。在使用slideToggle()方法時(shí)，如果元素是可見的，就通過(guò)減小高度使全部元素隱藏；如果元素是隱藏的，就增加元素的高度使元素最終全部可見。其語(yǔ)法格式如下：$(selector).slideToggle(speed,callback)12.4.3交替伸縮效果

【例12-3】滑動(dòng)效果示例。單擊“向下展開”按鈕，div元素中的內(nèi)容從上往下逐漸展開；單擊“向上收縮”按鈕，div元素中的內(nèi)容從下往上逐漸折疊；單擊“交替伸縮”按鈕，div元素中的內(nèi)容可以向下展開也可以向上收縮。12.5jQueryUI簡(jiǎn)介12.5.1jQueryUI概述12.5.2jQueryUI的下載12.5.3jQueryUI的使用12.5.4jQueryUI的工作原理12.5.1jQueryUI概述

1．jQueryUI的特性

jQueryUI是以jQuery為基礎(chǔ)開源JavaScript網(wǎng)頁(yè)用戶界面代碼庫(kù)，它包含底層用戶交互、動(dòng)畫、特效和可更換主題可視控件。

2．jQueryUI與jQuery的區(qū)別

1）jQuery是一個(gè)js庫(kù)，主要提供的功能是選擇器、屬性修改和事件綁定等。

2）jQueryUI是在jQuery的基礎(chǔ)上，利用jQuery的擴(kuò)展性設(shè)計(jì)的插件，提供了一些常用的界面元素。12.5.2jQueryUI的下載

在使用jQueryUI之前，需要下載jQueryUI庫(kù)，步驟如下。

1）在瀏覽器中輸入其官網(wǎng)網(wǎng)址。

2）單擊“CustomDownload”按鈕，進(jìn)入jQueryUI的DownloadBuilder頁(yè)面。

3）在DownloadBuilder頁(yè)面的左下角，用戶可以從這些提供的主題中選擇一個(gè)。

4）單擊“Download”按鈕，即可下載選擇的jQueryUI。12.5.3jQueryUI的使用

在網(wǎng)頁(yè)中使用jQueryUI插件時(shí)，需要將解壓之后的jquery-ui-1.12.1.custom文件夾復(fù)制到網(wǎng)頁(yè)所在的文件夾下，然后在網(wǎng)頁(yè)的<head>區(qū)域添加jquery-ui.css文件、jquery-ui.js文件及external/jquery文件夾下jquery.js文件的引用，代碼如下：<linkrel="stylesheet"href="jquery-ui-1.12.1.custom/jquery-ui.css"/><scriptsrc="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script><scriptsrc="jquery-ui-1.12.1.custom/jquery-ui.js"></script>12.5.4jQueryUI的工作原理

1．安裝

當(dāng)安裝插件時(shí)，生命周期開始，只需要在一個(gè)或多個(gè)元素上調(diào)用插件，即安裝了插件。

2．方法（1）option方法（2）disable方法（3）enable方法（4）destroy方法（5）widget方法12.5.4jQueryUI的工作原理

3．事件

所有的jQueryUI插件都有和它們各種行為相關(guān)的事件，用于在狀態(tài)改變時(shí)通知用戶。例如，可以綁定進(jìn)度條的change事件，一旦值發(fā)生變化就觸發(fā)，代碼如下：$("#elem").bind("progressbarchange",function(){alert("進(jìn)度條的值發(fā)生了改變!");});

每個(gè)事件都有一個(gè)相對(duì)應(yīng)的回調(diào)，作為選項(xiàng)進(jìn)行呈現(xiàn)。12.6jQueryUI的常用插件12.6.1折疊面板12.6.2自動(dòng)完成12.6.3標(biāo)簽頁(yè)12.6.1折疊面板

折疊面板的常用選項(xiàng)及說(shuō)明如表12-2所示。12.6.1折疊面板

折疊面板的常用方法及說(shuō)明如表12-3所示。12.6.1折疊面板

折疊面板的常用事件及說(shuō)明如表12-4所示。12.6.1折疊面板

【例12-4】實(shí)現(xiàn)折疊面板，默認(rèn)第一個(gè)面板為展開狀態(tài)。12.6.2自動(dòng)完成

自動(dòng)完成（Autocomplete）用來(lái)根據(jù)用戶輸入的值進(jìn)行搜索和過(guò)濾，讓用戶快速找到并從預(yù)設(shè)值列表中選擇。

自動(dòng)完成部件（AutocompleteWidget）使用jQueryUICSS框架來(lái)定義它的外觀和感觀的樣式。如果需要使用自動(dòng)完成部件指定的樣式，則可以使用下面的CSSclass名稱。ui-autocomplete：用于顯示匹配用戶的菜單（menu）。ui-autocomplete-input：自動(dòng)完成部件實(shí)例化input元素。12.6.2自動(dòng)完成

【例12-5】通過(guò)使用自動(dòng)完成實(shí)現(xiàn)根據(jù)用戶的輸入，智能顯示查詢列表的功能，如果查詢列表過(guò)長(zhǎng)，則可以通過(guò)為autocomplete設(shè)置max-height來(lái)防止菜單顯示太長(zhǎng)。12.6.3標(biāo)簽頁(yè)

標(biāo)簽頁(yè)（Tabs）是一種多面板的單內(nèi)容區(qū)，每個(gè)面板與列表中的標(biāo)題相關(guān)，單擊標(biāo)簽頁(yè)，可以切換顯示不同的邏輯內(nèi)容。標(biāo)簽頁(yè)（Tabs）必須在一個(gè)有序（<ol>）或無(wú)序（<ul>）列表中。每個(gè)標(biāo)簽頁(yè)的"title"必須在一個(gè)列表項(xiàng)（<li>）的內(nèi)部，且必須用一個(gè)帶有href屬性的錨（<a>）包裹。每個(gè)標(biāo)簽頁(yè)面板可以是任意有效的元素，但它必須帶有一個(gè)id，該id與相關(guān)標(biāo)簽頁(yè)的錨中的哈希值相對(duì)應(yīng)。11.6.4復(fù)合選擇器

復(fù)合選擇器的使用方法如下：$("selector1,selector2,…,selectorN");

1）selector1：一個(gè)有效的選擇器，id選擇器、元素選擇器或類名選擇器等。

2）selector2：另一個(gè)有效的選擇器，id選擇器、元素選擇器或類名選擇器等。

3）selectorN：任意多個(gè)選擇器，id選擇器、元素選擇器或是類名選擇器等。12.6.3標(biāo)簽頁(yè)

【例12-6】制作一個(gè)關(guān)于鮮品園公司介紹的標(biāo)簽頁(yè)，當(dāng)鼠標(biāo)指針經(jīng)過(guò)標(biāo)簽頁(yè)時(shí)打開標(biāo)簽頁(yè)內(nèi)容，當(dāng)鼠標(biāo)指針二次經(jīng)過(guò)標(biāo)簽頁(yè)時(shí)則隱藏標(biāo)簽頁(yè)內(nèi)容。習(xí)題121．編寫程序?qū)崿F(xiàn)正方形不同的淡入與淡出動(dòng)畫效果，如圖12-11所示。2．制作向上滾動(dòng)的動(dòng)態(tài)新聞效果，每隔3s新聞信息就會(huì)向上滾動(dòng)，如圖12-12所示。3．制作畫廊幻燈片切換效果。頁(yè)面加載后，每隔一段時(shí)間，圖片自動(dòng)切換到下一幅；用戶單擊圖片右下方的數(shù)字，將直接切換到相應(yīng)的圖片；用戶單擊鏈接文字，可以打開相應(yīng)的網(wǎng)頁(yè)，如圖12-13所示。習(xí)題124．使用

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論