《web前端技術(shù)》(趙敏)003-0教案 第29課 jQuery的動(dòng)畫(huà)效果_第1頁(yè)
《web前端技術(shù)》(趙敏)003-0教案 第29課 jQuery的動(dòng)畫(huà)效果_第2頁(yè)
《web前端技術(shù)》(趙敏)003-0教案 第29課 jQuery的動(dòng)畫(huà)效果_第3頁(yè)
《web前端技術(shù)》(趙敏)003-0教案 第29課 jQuery的動(dòng)畫(huà)效果_第4頁(yè)
《web前端技術(shù)》(趙敏)003-0教案 第29課 jQuery的動(dòng)畫(huà)效果_第5頁(yè)
已閱讀5頁(yè)，還剩2頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

PAGE1PAGE1PAGE2PAGE2

課題第29課jQuery的動(dòng)畫(huà)效果課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：掌握jQuery的動(dòng)畫(huà)效果，包括元素的隱藏與顯示、元素的淡入淡出和元素的滑動(dòng)效果等素質(zhì)目標(biāo)：（1）提高自我學(xué)習(xí)能力，增強(qiáng)自信心（2）培養(yǎng)良好的學(xué)習(xí)方法，增強(qiáng)舉一反三的能力教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：jQuery元素的隱藏與顯示和淡入淡出效果教學(xué)難點(diǎn)：元素的滑動(dòng)效果教學(xué)方法問(wèn)答法、討論法、講授法、實(shí)踐練習(xí)法、演示法教學(xué)用具電腦、投影儀、多媒體課件、教材、文旌課堂APP教學(xué)設(shè)計(jì)第1節(jié)課：→→→傳授新知（20min）→實(shí)戰(zhàn)拓展（20min）第2節(jié)課：實(shí)戰(zhàn)演練（25min）→→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過(guò)程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，把和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過(guò)文旌課堂APP或其他學(xué)習(xí)軟件，完成課前任務(wù)了解jQuery動(dòng)畫(huà)效果【學(xué)生】完成課前任務(wù)通過(guò)課前任務(wù)，讓學(xué)生提前了解jQuery動(dòng)畫(huà)效果，為課堂上學(xué)習(xí)相關(guān)知識(shí)點(diǎn)做準(zhǔn)備考勤（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問(wèn)題導(dǎo)入（3min）【教師】提出問(wèn)題jQuery可以實(shí)現(xiàn)哪些動(dòng)畫(huà)效果？【學(xué)生】思考、舉手回答【教師】通過(guò)學(xué)生的回答引入要講的知識(shí)使用jQuery可以很方便地制作出網(wǎng)頁(yè)元素的動(dòng)畫(huà)效果，該動(dòng)畫(huà)效果包括元素的隱藏與顯示、元素的淡入淡出和元素的滑動(dòng)效果等。通過(guò)問(wèn)題導(dǎo)入的方法，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（20min）13.5jQuery的動(dòng)畫(huà)效果【教師】講解jQuery的動(dòng)畫(huà)效果，展示相應(yīng)的表格，并演示例子輔助講解13.5.1元素的隱藏和顯示元素的隱藏與顯示是最基本的動(dòng)畫(huà)效果。jQuery提供了兩種控制元素隱藏和顯示的方法，一種是分別隱藏和顯示匹配元素；另一種是切換元素的可見(jiàn)狀態(tài)。1．分別隱藏和顯示匹配元素在jQuery中，使用hide()方法隱藏匹配的元素，其語(yǔ)法格式為：…（詳見(jiàn)教材）jQuery中，使用show()方法顯示匹配的元素，其語(yǔ)法格式為：…（詳見(jiàn)教材）2．切換元素的可見(jiàn)狀態(tài)在jQuery中，使用toggle()方法切換元素的可見(jiàn)狀態(tài)，即如果元素是可見(jiàn)的，切換為隱藏；如果元素是隱藏的，切換為可見(jiàn)，其語(yǔ)法格式為：$(selector).toggle(speed,callback)【例13-4】元素的隱藏和顯示…（詳見(jiàn)教材）13.5.2元素的淡入淡出隱藏和顯示元素時(shí)會(huì)改變?cè)氐母叨群蛯挾龋糸_(kāi)發(fā)過(guò)程中不需要改變?cè)氐母叨群蛯挾龋恍枰獑为?dú)改變?cè)氐耐该鞫葧r(shí)，就可以通過(guò)元素的淡入淡出效果實(shí)現(xiàn)。jQuery提供了實(shí)現(xiàn)元素淡入淡出效果的方法，…（詳見(jiàn)教材）【教師】展示表“實(shí)現(xiàn)元素淡入淡出動(dòng)畫(huà)效果的方法”并講解內(nèi)容speed表示效果的時(shí)長(zhǎng)，它的取值可以為"slow"、"fast"或毫秒；callback表示淡入/淡出完成后所執(zhí)行的函數(shù)名稱(chēng)；…（詳見(jiàn)教材）13.5.3元素的滑動(dòng)效果jQuery提供了實(shí)現(xiàn)元素滑動(dòng)效果的方法，【教師】展示表“實(shí)現(xiàn)元素滑動(dòng)效果的方法”并講解內(nèi)容…（詳見(jiàn)教材）通過(guò)教師的講解和演示例子，使學(xué)生掌握jQuery動(dòng)畫(huà)效果的相關(guān)知識(shí)實(shí)戰(zhàn)拓展（20min）【教師】要求學(xué)生完成以下項(xiàng)目，有疑問(wèn)可互相討論，或詢(xún)問(wèn)老師題目：下拉菜單要求：(1)熟悉初始文檔結(jié)構(gòu)。

(2)添加代碼實(shí)現(xiàn)，鼠標(biāo)單移入菜單項(xiàng)時(shí)其子菜單顯示，移出時(shí)子菜單隱藏。答案：、討論通過(guò)制作項(xiàng)目，鍛煉學(xué)生的編程能力第二節(jié)課實(shí)戰(zhàn)演練（25min）制作自動(dòng)隱藏式菜單【教師】展示此項(xiàng)目做成的最終效果，并找同學(xué)分析，該頁(yè)面有哪些元素，利用到本章所學(xué)的哪些知識(shí)在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，可以在頁(yè)面中添加自動(dòng)隱藏式菜單。這種菜單簡(jiǎn)潔易用，在不使用時(shí)可以自動(dòng)隱藏，從而保持頁(yè)面整潔。此頁(yè)面有哪些元素，有哪些動(dòng)畫(huà)效果，應(yīng)該怎么實(shí)現(xiàn)？討論、回答【教師】要求學(xué)生先導(dǎo)入素材并添加頁(yè)面的內(nèi)容和頁(yè)面的CSS樣式，遇到不會(huì)的問(wèn)題可以掃描微課二維碼觀看視頻”制作“金企鵝教育”主頁(yè)的輪播圖”（詳見(jiàn)教材），可討論或咨詢(xún)老師步驟1在HBuilderX中導(dǎo)入本書(shū)配套素材“素材與案例\第13章\實(shí)戰(zhàn)演練”文件夾，然后打開(kāi)“13.5.html”文檔。步驟2添加頁(yè)面內(nèi)容。在<body>…</body>中添加以下代碼設(shè)置隱藏菜單，…（詳見(jiàn)教材）步驟3設(shè)置頁(yè)面的CSS樣式。在<style>…</style>中添加以下代碼設(shè)置隱藏菜單的樣式，…（詳見(jiàn)教材）【學(xué)生】觀看微課、制作項(xiàng)目、討論【教師】講解引入jQuery文件并編寫(xiě)jQuery代碼，然后讓學(xué)生根據(jù)講解繼續(xù)制作該項(xiàng)目，遇到不會(huì)的問(wèn)題可以掃描微課二維碼觀看視頻”制作自動(dòng)隱藏式菜單”（詳見(jiàn)教材），可討論或咨詢(xún)老師步驟4引入jQuery文件并編寫(xiě)jQuery代碼。在</style>標(biāo)簽后面添加以下代碼引入jQuery文件并編寫(xiě)jQuery代碼，實(shí)現(xiàn)自動(dòng)隱藏式菜單，即可得到如圖所示頁(yè)面效果…（詳見(jiàn)教材）【課堂拓展】步驟4中，綁定鼠標(biāo)移出事件時(shí)，使用了hover()方法而沒(méi)有使用mouseout()方法，這是因?yàn)槿绻褂胢ouseout()方法，當(dāng)鼠標(biāo)指針在菜單上移動(dòng)時(shí)，菜單將在顯示與隱藏狀態(tài)下反復(fù)切換，而使用hover()方法可以有效地解決這一問(wèn)題?！緦W(xué)生】通過(guò)老師講解，和學(xué)生動(dòng)手制作項(xiàng)目，讓學(xué)生掌握jQuery動(dòng)畫(huà)效果如何實(shí)現(xiàn)，學(xué)會(huì)制作隱藏式菜單實(shí)戰(zhàn)拓展（15min）手風(fēng)琴輪播案例在動(dòng)畫(huà)animate里面設(shè)置元素百分比的寬高時(shí)加""；animate方法后要加時(shí)間參數(shù)在animate中，所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left.實(shí)現(xiàn)過(guò)程先判斷好每個(gè)條（第幾張）的位置，在顯示的圖片左邊或右邊，長(zhǎng)度的變化等，然后添加圖片，調(diào)整透明度及位置實(shí)現(xiàn)效果答案：jQuery部分頁(yè)面布局:通過(guò)手風(fēng)琴輪播圖項(xiàng)目制作，讓學(xué)生鞏固對(duì)jQuery動(dòng)畫(huà)效果的理解課堂小結(jié)（3min）【教師】簡(jiǎn)要總結(jié)本節(jié)課的要點(diǎn)本節(jié)課主要介紹了jQuery動(dòng)畫(huà)效果的相關(guān)知識(shí)。通過(guò)本節(jié)課的學(xué)習(xí)，學(xué)生應(yīng)重點(diǎn)掌握以下內(nèi)容。使用jQuery可以很方便地制作出網(wǎng)頁(yè)元素的動(dòng)畫(huà)效果，該動(dòng)畫(huà)效果包括元素的隱藏與顯示、元素的淡入淡出和元素的滑動(dòng)效果等?！緦W(xué)生】總結(jié)回顧知識(shí)點(diǎn)總結(jié)知識(shí)點(diǎn)，使學(xué)生牢固掌握jQuery動(dòng)畫(huà)效果的相關(guān)知識(shí)作業(yè)布置（2min）【教師】布置課后作業(yè)，講解做題思路，引導(dǎo)學(xué)生思考個(gè)人作業(yè)：請(qǐng)根據(jù)課堂所學(xué)知識(shí)，完成課后習(xí)題和實(shí)訓(xùn)練習(xí)團(tuán)隊(duì)作業(yè)：根據(jù)課上所學(xué)知識(shí)，完成隊(duì)伍項(xiàng)目的動(dòng)畫(huà)制作【學(xué)生】完成課后任務(wù)通過(guò)課后作業(yè)復(fù)習(xí)鞏固學(xué)到的知識(shí)，通過(guò)代碼的編寫(xiě)，鍛煉學(xué)生邏輯思維

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 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ì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論