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

下載本文檔

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

文檔簡介

第5章jQuery實現(xiàn)動畫效果《jQuery前端開發(fā)任務(wù)驅(qū)動教程》學(xué)習(xí)目標(biāo)/Target

掌握淡入和淡出元素的方法，能夠?qū)崿F(xiàn)元素的淡入和淡出效果

掌握上滑和下滑元素的方法，能夠?qū)崿F(xiàn)元素的上滑和下滑效果掌握操作元素尺寸的方法，能夠根據(jù)實際情況靈活獲取元素的尺寸學(xué)習(xí)目標(biāo)/Target

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

掌握滑動切換導(dǎo)航菜單效果的實現(xiàn)方法，能夠完成滑動切換導(dǎo)航菜單的效果掌握導(dǎo)航欄下劃線跟隨選中菜單項滑動效果的實現(xiàn)方法，能夠完成導(dǎo)航欄下

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

先定一個小目標(biāo)！掌握淡入和淡出元素的方法，能夠?qū)崿F(xiàn)元素的淡入和淡出效果如果希望元素以淡入的動畫效果顯示，或者以淡出的動畫效果隱藏，如何實現(xiàn)呢？知識儲備淡入和淡出元素的方法知識儲備淡入和淡出元素的方法可以使用jQuery中的淡入和淡出元素的方法來實現(xiàn)。jQuery中用于淡入和淡出元素的方法如下表所示。方法說明fadeIn([duration][,easing][,complete])通過淡入的方式顯示匹配元素fadeOut([duration][,easing][,complete])通過淡出的方式隱藏匹配元素fadeToggle([duration][,easing][,complete])根據(jù)元素當(dāng)前的狀態(tài)，通過淡入或淡出的方式顯示或隱藏元素知識儲備淡入和淡出元素方法的介紹。淡入和淡出元素的方法fadeIn()方法通過逐漸增加元素的不透明度（不透明度從0逐漸變?yōu)?）實現(xiàn)元素逐漸顯示的效果。fadeOut()方法通過逐漸降低元素的不透明度（不透明度從1逐漸變?yōu)?）實現(xiàn)元素逐漸隱藏的效果。fadeToggle()方法可以使元素在顯示和隱藏狀態(tài)之間切換。如果元素當(dāng)前是可見的，則調(diào)用fadeToggle()方法會使元素逐漸隱藏；如果元素當(dāng)前是隱藏的，則調(diào)用fadeToggle()方法會使元素逐漸顯示。知識儲備淡入和淡出元素方法的各個參數(shù)的介紹。duration：表示動畫的持續(xù)時間，可以設(shè)置為以毫秒為單位的動畫時長（如1000）或預(yù)定的速度值（如slow、fast）。easing：表示切換效果，默認(rèn)值為swing（開始和結(jié)束時速度慢，中間速度快），也可以設(shè)置為linear（勻速）。complete：表示在動畫完成后執(zhí)行的回調(diào)函數(shù)。淡入和淡出元素的方法知識儲備下面以fadeIn()方法為例，演示元素淡入方法的使用方法，實現(xiàn)單擊按鈕后淡入顯示隱藏的內(nèi)容的效果，示例代碼如下。<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>標(biāo)簽，單擊“淡入”按鈕，查看盒子的不透明度變化，如下圖所示。<div>標(biāo)簽的opacity屬性逐漸從0變化到1，元素的display屬性被設(shè)置為block，從而實現(xiàn)盒子淡入的效果。淡入和淡出元素的方法任務(wù)實現(xiàn)

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

先定一個小目標(biāo)！掌握上滑和下滑元素的方法，能夠?qū)崿F(xiàn)元素的上滑和下滑效果如果希望用戶單擊一個按鈕時，一個元素以向下滑動的動畫效果顯示，且當(dāng)單擊另一個按鈕時，該元素從當(dāng)前位置向上滑動并隱藏，如何實現(xiàn)呢？知識儲備上滑和下滑元素的方法知識儲備可以使用jQuery中上滑和下滑元素的方法來實現(xiàn)。jQuery中用于上滑和下滑元素的方法如下表所示。方法說明slideDown([duration][,easing][,complete])通過向下滑動的方式顯示元素slideUp([duration][,easing][,complete])通過向上滑動的方式隱藏元素slideToggle([duration][,easing][,complete])使元素在顯示和隱藏狀態(tài)之間切換上滑和下滑元素的方法知識儲備針對上滑和下滑元素的方法的介紹如下。slideDown()方法通過向下滑動的方式顯示元素，直到元素完全展開。slideUp()方法通過向上滑動的方式隱藏元素，直到元素的高度變?yōu)?。在高度變?yōu)?之后，slideUp()方法會將元素的display屬性值設(shè)置為none，以防止元素仍然占據(jù)空間并干擾其他元素的布局。slideToggle()方法可以使元素在顯示和隱藏狀態(tài)之間進行切換。如果元素當(dāng)前是可見的，則調(diào)用slideToggle()方法會將元素向上滑動隱藏；如果元素當(dāng)前是隱藏的，則調(diào)用slideToggle()方法會將元素向下滑動顯示。上滑和下滑元素的方法知識儲備下面以slideUp()方法為例，演示如何實現(xiàn)圖像上滑隱藏，示例代碼如下。<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>標(biāo)簽，單擊“滑動隱藏圖像”按鈕，查看圖像的尺寸變化，如下圖所示。<div>標(biāo)簽的height屬性值逐漸減少到0，變?yōu)?后，slideUp()方法將元素的display屬性值設(shè)置為none，從而實現(xiàn)圖像向上滑動隱藏的效果。上滑和下滑元素的方法任務(wù)實現(xiàn)

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

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

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

div{

width:100px;

height:100px;

border:1pxsolid#999;

padding:10px;

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

<div>這里是內(nèi)容區(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>操作元素尺寸的方法>>接上頁代碼知識儲備操作元素尺寸的方法上述示例代碼運行后，控制臺的輸出結(jié)果如下圖所示。其中，前兩個值是通過width()方法和height()方法獲取到的值，包括元素本身的寬度和高度；后兩個值是通過innerWidth()方法和innerHeight()方法獲取到的值，包括元素本身的寬度、高度和元素內(nèi)邊距，不包含邊框?qū)挾?。知識儲備（4）outerWidth()方法和outerHeight()方法outerWidth()方法和outerHeight()方法可用于獲取匹配元素集中第一個元素的寬度和高度。這兩個方法可以通過傳入的布爾值參數(shù)來控制返回的值是否包括元素的外邊距。當(dāng)傳入?yún)?shù)為true時，這兩個方法返回的元素的寬度和高度包括內(nèi)邊距、邊框?qū)挾群屯膺吘?。?dāng)傳入?yún)?shù)為false或不傳入省略時，這兩個方法返回的元素的寬度和高度僅包括內(nèi)邊距和邊框?qū)挾?，不包括外邊距。操作元素尺寸的方法知識儲備下面演示如何使用outerWidth()方法和outerHeight()方法，并展示傳入?yún)?shù)true與省略參數(shù)的區(qū)別，示例代碼如下。<head><style>

div{

width:100px;

height:100px;

border:1pxsolid#999;

padding:10px;

margin:2px;

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

<div>這里是內(nèi)容區(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. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論