jQuery前端開發(fā)任務驅動教程 課件 第5章 jQuery實現動畫效果_第1頁
jQuery前端開發(fā)任務驅動教程 課件 第5章 jQuery實現動畫效果_第2頁
jQuery前端開發(fā)任務驅動教程 課件 第5章 jQuery實現動畫效果_第3頁
jQuery前端開發(fā)任務驅動教程 課件 第5章 jQuery實現動畫效果_第4頁
jQuery前端開發(fā)任務驅動教程 課件 第5章 jQuery實現動畫效果_第5頁
已閱讀5頁，還剩58頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第5章jQuery實現動畫效果《jQuery前端開發(fā)任務驅動教程》學習目標/Target

掌握淡入和淡出元素的方法，能夠實現元素的淡入和淡出效果

掌握上滑和下滑元素的方法，能夠實現元素的上滑和下滑效果掌握操作元素尺寸的方法，能夠根據實際情況靈活獲取元素的尺寸學習目標/Target

掌握開關燈效果的實現方法，能夠通過單擊按鈕切換燈的開啟和關閉狀態(tài)

掌握滑動切換導航菜單效果的實現方法，能夠完成滑動切換導航菜單的效果掌握導航欄下劃線跟隨選中菜單項滑動效果的實現方法，能夠完成導航欄下

劃線跟隨選中菜單項滑動的效果章節(jié)概述/Summary在網頁開發(fā)中，動畫扮演著重要角色。它不僅可以使網頁內容更加生動有趣，還可以提升用戶體驗和增加視覺吸引力。動畫讓元素的出現、消失和變換過程更加平滑流暢，可給用戶帶來更好的交互感和視覺體驗。此外，動畫還能突出顯示重要內容、引導用戶注意力。在開發(fā)中，合理地應用動畫可以增強網頁的動感和活力，并提升用戶的使用體驗，加深用戶對網頁的印象。本章將詳細講解如何使用jQuery實現各種動畫效果。目錄/Contents任務5.1任務5.2開關燈效果滑動切換導航菜單效果任務5.3導航欄下劃線跟隨選中菜單項滑動效果開關燈效果任務5.1任務需求隨著科技的不斷進步和智能設備的廣泛應用，智能家居的普及程度越來越高。例如，用戶可以通過智能手機或平板電腦遠程控制房間內的燈光。不僅可以簡單地打開或關閉燈光，還可以自由地調節(jié)亮度和色溫，以滿足多樣的照明需求。為了模擬燈光的控制，本任務使用jQuery實現簡單的開關燈效果。頁面初次加載時，燈是關閉狀態(tài)，按鈕的文字顯示為“開燈”，背景圖像為關燈的圖像。單擊按鈕時，根據當前燈的狀態(tài)進行相應的操作，具體如下。如果當前燈是開啟狀態(tài)，單擊“關燈”按鈕時，將開燈的背景圖像淡出隱藏，將關燈的背景圖像淡入顯示，同時將按鈕的文字改為“開燈”。如果當前燈為關閉狀態(tài)，單擊“開燈”按鈕時，將關燈的背景圖像淡出隱藏，將開燈的背景圖像淡入顯示，同時將按鈕的文字改為“關燈”。任務需求燈的開啟狀態(tài)和關閉狀態(tài)的效果如下圖所示。任務需求知識儲備淡入和淡出元素的方法

先定一個小目標！掌握淡入和淡出元素的方法，能夠實現元素的淡入和淡出效果如果希望元素以淡入的動畫效果顯示，或者以淡出的動畫效果隱藏，如何實現呢？知識儲備淡入和淡出元素的方法知識儲備淡入和淡出元素的方法可以使用jQuery中的淡入和淡出元素的方法來實現。jQuery中用于淡入和淡出元素的方法如下表所示。方法說明fadeIn([duration][,easing][,complete])通過淡入的方式顯示匹配元素fadeOut([duration][,easing][,complete])通過淡出的方式隱藏匹配元素fadeToggle([duration][,easing][,complete])根據元素當前的狀態(tài)，通過淡入或淡出的方式顯示或隱藏元素知識儲備淡入和淡出元素方法的介紹。淡入和淡出元素的方法fadeIn()方法通過逐漸增加元素的不透明度（不透明度從0逐漸變?yōu)?）實現元素逐漸顯示的效果。fadeOut()方法通過逐漸降低元素的不透明度（不透明度從1逐漸變?yōu)?）實現元素逐漸隱藏的效果。fadeToggle()方法可以使元素在顯示和隱藏狀態(tài)之間切換。如果元素當前是可見的，則調用fadeToggle()方法會使元素逐漸隱藏；如果元素當前是隱藏的，則調用fadeToggle()方法會使元素逐漸顯示。知識儲備淡入和淡出元素方法的各個參數的介紹。duration：表示動畫的持續(xù)時間，可以設置為以毫秒為單位的動畫時長（如1000）或預定的速度值（如slow、fast）。easing：表示切換效果，默認值為swing（開始和結束時速度慢，中間速度快），也可以設置為linear（勻速）。complete：表示在動畫完成后執(zhí)行的回調函數。淡入和淡出元素的方法知識儲備下面以fadeIn()方法為例，演示元素淡入方法的使用方法，實現單擊按鈕后淡入顯示隱藏的內容的效果，示例代碼如下。<head><style>

div{

width:200px;height:200px;background-color:red;display:none;

}</style></head>淡入和淡出元素的方法知識儲備>>接上頁代碼<body>

<buttonid="toggle_btn">淡入</button>

<div></div>

<script>

$('#toggle_btn').on('click',function(){

$('div').fadeIn(1000);

});

</script></body>淡入和淡出元素的方法知識儲備上述示例代碼運行后，頁面中會顯示一個“淡入”按鈕。單擊該按鈕后，一個盒子逐漸顯示出來，盒子的淡入過程演示效果如下圖所示。單擊按鈕后，在等待1秒的期間盒子逐漸顯示出來，等待1秒后，盒子完全顯示出來。淡入和淡出元素的方法知識儲備為了更好地分析盒子的淡入效果，打開Chrome瀏覽器的開發(fā)者工具，單擊Elements選項卡，選中<div>標簽，單擊“淡入”按鈕，查看盒子的不透明度變化，如下圖所示。<div>標簽的opacity屬性逐漸從0變化到1，元素的display屬性被設置為block，從而實現盒子淡入的效果。淡入和淡出元素的方法任務實現

先定一個小目標！掌握開關燈效果的實現方法，能夠通過單擊按鈕切換燈的開啟和關閉狀態(tài)任務實現創(chuàng)建D:\jQuery\chapter05目錄，將jquery-3.6.4.min.js文件和本章配套源代碼中的images文件夾復制到該目錄下，并使用VSCode編輯器打開該目錄。創(chuàng)建switch.html文件，編寫開關燈頁面的結構并引入jquery-3.6.4.min.js文件。步驟1步驟2實現開關燈效果的開發(fā)編寫開關燈頁面的樣式。編寫邏輯代碼，實現單擊按鈕切換對應的背景圖像和按鈕上顯示的文字，以及淡入淡出效果。步驟3步驟4任務實現在瀏覽器中打開switch.html文件，初始頁面效果如下圖所示。初始頁面中燈為關閉狀態(tài)，且按鈕的文字為“開燈”。任務實現單擊“開燈”按鈕，開燈頁面效果如下圖所示。當前燈為開啟狀態(tài)，且按鈕上的文字為“關燈”。滑動切換導航菜單效果任務5.2任務需求隨著科技的不斷進步和經濟的發(fā)展，旅游行業(yè)越來越多地采用數字技術和互聯網平臺來提供更便捷和個性化的服務。某旅游公司正在開發(fā)一個旅游平臺，當前正在進行導航菜單的開發(fā)任務。這個任務要求實現以下功能：當鼠標指針移入一級菜單項時，對應的二級菜單項以向下滑動的方式顯示；當鼠標指針移出一級菜單項時，二級菜單項以向上滑動的方式隱藏。任務需求導航菜單的一級菜單項以及相應的二級菜單項如下表所示。一級菜單項二級菜單項首頁無文化北京演出、展覽、影視特色文化古都文化、紅色文化、京味文化特色美食北京烤鴨、炸醬面、驢打滾特色景區(qū)故宮、天安門廣場導游服務聯系方式、導游介紹、預約導航地圖和交通交通路線、地圖聯系我們聯系方式、客服電話鼠標指針移入和移出一級菜單項的效果如下圖所示。任務需求知識儲備上滑和下滑元素的方法

先定一個小目標！掌握上滑和下滑元素的方法，能夠實現元素的上滑和下滑效果如果希望用戶單擊一個按鈕時，一個元素以向下滑動的動畫效果顯示，且當單擊另一個按鈕時，該元素從當前位置向上滑動并隱藏，如何實現呢？知識儲備上滑和下滑元素的方法知識儲備可以使用jQuery中上滑和下滑元素的方法來實現。jQuery中用于上滑和下滑元素的方法如下表所示。方法說明slideDown([duration][,easing][,complete])通過向下滑動的方式顯示元素slideUp([duration][,easing][,complete])通過向上滑動的方式隱藏元素slideToggle([duration][,easing][,complete])使元素在顯示和隱藏狀態(tài)之間切換上滑和下滑元素的方法知識儲備針對上滑和下滑元素的方法的介紹如下。slideDown()方法通過向下滑動的方式顯示元素，直到元素完全展開。slideUp()方法通過向上滑動的方式隱藏元素，直到元素的高度變?yōu)?。在高度變?yōu)?之后，slideUp()方法會將元素的display屬性值設置為none，以防止元素仍然占據空間并干擾其他元素的布局。slideToggle()方法可以使元素在顯示和隱藏狀態(tài)之間進行切換。如果元素當前是可見的，則調用slideToggle()方法會將元素向上滑動隱藏；如果元素當前是隱藏的，則調用slideToggle()方法會將元素向下滑動顯示。上滑和下滑元素的方法知識儲備下面以slideUp()方法為例，演示如何實現圖像上滑隱藏，示例代碼如下。<head><style>input{margin-bottom:20px;}div{width:200px;height:500px;text-align:center;background:url("images/flag.png")topcenterno-repeat;background-size:200px500px;

}上滑和下滑元素的方法知識儲備>>接上頁代碼

divspan{

margin-top:50px;

line-height:50px;

display:inline-block;

width:40px;

font-family:"KaiTi";

font-size:40px;

color:#ff0;

}

</style></head>上滑和下滑元素的方法知識儲備>>接上頁代碼<body>

<inputtype="button"value="滑動隱藏圖像">

<div>

<span>青春有志須勤奮</span>

</div>

<script>

$('input').on('click',function(){

$('div').slideUp('slow');

});

</script></body>上滑和下滑元素的方法知識儲備上述示例代碼運行后，頁面上會顯示一個“滑動隱藏圖像”按鈕。單擊該按鈕后，圖像將以向上滑動的方式隱藏，圖像的滑動過程演示效果如下圖所示。上滑和下滑元素的方法知識儲備為了更好地分析圖像的滑動效果，打開Chrome瀏覽器的開發(fā)者工具，單擊Elements選項卡，選中<div>標簽，單擊“滑動隱藏圖像”按鈕，查看圖像的尺寸變化，如下圖所示。<div>標簽的height屬性值逐漸減少到0，變?yōu)?后，slideUp()方法將元素的display屬性值設置為none，從而實現圖像向上滑動隱藏的效果。上滑和下滑元素的方法任務實現

先定一個小目標！掌握滑動切換導航菜單效果的實現方法，能夠完成滑動切換導航菜單的效果任務實現創(chuàng)建sliderNavigation.html文件，編寫導航菜單的頁面結構并引入jquery-3.6.4.min.js文件。編寫導航菜單頁面的樣式代碼。步驟1步驟2實現滑動切換導航菜單的開發(fā)編寫邏輯代碼，實現導航菜單下滑展示和上滑隱藏效果。步驟3任務實現在瀏覽器中打開sliderNavigation.html文件，然后將鼠標指針移到“特色文化”下的“紅色文化”選項上，滑動切換導航菜單效果如下圖所示。當鼠標指針位于“特色文化”下的“紅色文化”選項上時，文字的不透明度改變。任務5.3導航欄下劃線跟隨選中菜單項滑動效果任務需求某企業(yè)網站的導航欄太過單調，缺乏吸引人的動態(tài)效果，沒有足夠的互動性，難以吸引用戶的關注。為了提升用戶體驗和增強頁面的互動性，該企業(yè)決定優(yōu)化導航欄的交互效果，使用jQuery實現導航欄下劃線跟隨選中菜單項滑動的效果。任務需求當鼠標指針移入導航欄的菜單項時，當前選中的菜單項的下方顯示一條下劃線。當鼠標指針從當前選中的菜單項移動到另一個菜單項時，下劃線平滑地從當前位置滑動到另一個菜單項，整個過程自然、流暢。當鼠標指針移出當前選中的菜單項時，下劃線停留在該菜單項下方，直至下一次鼠標指針移入。鼠標指針移入和移出菜單項的效果如下圖所示。任務需求知識儲備操作元素尺寸的方法

先定一個小目標！掌握操作元素尺寸的方法，能夠根據實際情況靈活獲取元素的尺寸在網頁開發(fā)中，常常需要對元素尺寸進行操作，以滿足不同的布局需求和用戶交互需求。例如，實現登錄框的拖曳特效、圖片的放大功能等。知識儲備操作元素尺寸的方法知識儲備jQuery提供了專門用于操作元素尺寸的方法，如下表所示。方法說明width()用于獲取或設置元素的寬度，不包括內邊距、邊框寬度和外邊距height()用于獲取或設置元素的高度，不包括內邊距、邊框寬度和外邊距innerWidth()用于獲取元素的寬度，包括內邊距innerHeight()用于獲取元素的高度，包括內邊距outerWidth([true])用于獲取元素的寬度，包括內邊距和邊框寬度，如果傳入參數true，則包括外邊距outerHeight([true])用于獲取元素的高度，包括內邊距和邊框寬度，如果傳入參數true，則包括外邊距操作元素尺寸的方法知識儲備（1）width()方法width()方法用于操作元素的寬度，該方法可以用于獲取匹配元素集中第一個元素的寬度，也可以用于設置匹配元素集中每個元素的寬度。調用width()方法獲取的元素的寬度不包括內邊距、邊框寬度和外邊距。在jQuery中，可以使用jQuery對象來調用width()方法，width()方法的語法格式如下。width() //獲取元素的寬度width(value) //設置元素的寬度width(function(index,width){}) //動態(tài)設置元素的寬度操作元素尺寸的方法知識儲備操作元素尺寸的方法對語法格式的解釋如下。當width()方法不傳入參數時，表示獲取元素的寬度，返回值為一個數字，單位為px。當width()方法傳入參數value時，表示設置元素的寬度。value可以是一個數字或一個字符串。如果value是一個數字，jQuery會自動為其添加默認的單位px；如果value是一個字符串，可以直接設置為有效的CSS尺寸，如100px、50%或auto。當width()方法傳入一個函數時，表示動態(tài)設置元素的寬度。該函數接收兩個參數，index表示元素的索引，width表示元素設置前的寬度。該函數應返回一個新的寬度。知識儲備（2）height()方法height()方法用于操作元素的高度，該方法可以用于獲取匹配元素集中第一個元素的高度，也可以用于設置匹配元素集中每個元素的高度。調用height()方法獲取的元素的高度不包括內邊距、邊框寬度和外邊距。在jQuery中，可以使用jQuery對象來調用height()方法，height()方法的語法格式如下。height()

//獲取元素的高度height(value) //設置元素的高度height(function(index,width){}) //動態(tài)設置元素的高度操作元素尺寸的方法操作元素尺寸的方法知識儲備對語法格式的解釋如下。當height()方法不傳遞參數時表示獲取元素的高度，返回值為一個數字，單位為px。當height()方法傳入參數value時，表示設置元素的高度，value的含義與width()方法中value參數的含義相同。當height()方法傳入一個函數時，表示動態(tài)設置元素的高度。該函數接收兩個參數，index表示元素的索引，height表示元素設置前的高度。該函數應返回一個新的高度。知識儲備（3）innerWidth()方法和innerHeight()方法innerWidth()方法和innerHeight()方法分別用于獲取匹配元素集中第一個元素的寬度和高度。與width()方法和height()方法不同的是，這兩個方法獲取的元素寬度和高度包括元素的內邊距。操作元素尺寸的方法知識儲備下面演示如何使用innerWidth()方法和innerHeight()方法獲取元素的寬度和高度，并展示其與使用width()方法和height()方法獲取元素的寬度和高度的區(qū)別，示例代碼如下。<head><style>

div{

width:100px;

height:100px;

border:1pxsolid#999;

padding:10px;

}</style></head>操作元素尺寸的方法知識儲備<body>

<div>這里是內容區(qū)域</div>

<script>

varwidth=$('div').width();

varheight=$('div').height();

varinnerWidth=$('div').innerWidth();

varinnerHeight=$('div').innerHeight();

console.log('width：'+width);

console.log('height：'+height);

console.log('innerWidth：'+innerWidth);

console.log('innerHeight：'+innerHeight);

</script></body>操作元素尺寸的方法>>接上頁代碼知識儲備操作元素尺寸的方法上述示例代碼運行后，控制臺的輸出結果如下圖所示。其中，前兩個值是通過width()方法和height()方法獲取到的值，包括元素本身的寬度和高度；后兩個值是通過innerWidth()方法和innerHeight()方法獲取到的值，包括元素本身的寬度、高度和元素內邊距，不包含邊框寬度。知識儲備（4）outerWidth()方法和outerHeight()方法outerWidth()方法和outerHeight()方法可用于獲取匹配元素集中第一個元素的寬度和高度。這兩個方法可以通過傳入的布爾值參數來控制返回的值是否包括元素的外邊距。當傳入參數為true時，這兩個方法返回的元素的寬度和高度包括內邊距、邊框寬度和外邊距。當傳入參數為false或不傳入省略時，這兩個方法返回的元素的寬度和高度僅包括內邊距和邊框寬度，不包括外邊距。操作元素尺寸的方法知識儲備下面演示如何使用outerWidth()方法和outerHeight()方法，并展示傳入參數true與省略參數的區(qū)別，示例代碼如下。<head><style>

div{

width:100px;

height:100px;

border:1pxsolid#999;

padding:10px;

margin:2px;

}</style></head>操作元素尺寸的方法知識儲備<body>

<div>這里是內容區(qū)域</div>

<script>

varouterWidth=$('div').outerWidth();

varouterHeight=$('div').outerHeight();

varouterWidthWithMargin=$('div').outerWidth(true);

varouterHeightWithMargin=$('div').outerHeight(true);

console.log('outerWidth：'+outerWidth);

console.log('outerHeight：'+outerHeight);

console.log('outerWidthWithMargin：'+outerWidthWithMargin);

console.log('outerHeightWithMargin：'+

溫馨提示

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

評論

0/150

提交評論