《web前端技術》(趙敏)003-0教案 第29課 jQuery的動畫效果_第1頁
《web前端技術》(趙敏)003-0教案 第29課 jQuery的動畫效果_第2頁
《web前端技術》(趙敏)003-0教案 第29課 jQuery的動畫效果_第3頁
《web前端技術》(趙敏)003-0教案 第29課 jQuery的動畫效果_第4頁
《web前端技術》(趙敏)003-0教案 第29課 jQuery的動畫效果_第5頁
已閱讀5頁，還剩2頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

PAGE1PAGE1PAGE2PAGE2

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

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

溫馨提示

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

評論

0/150

提交評論