《Web前端技術(shù)應(yīng)用》教學(xué)設(shè)計(jì)項(xiàng)目四任務(wù)二完成動(dòng)畫與鼠標(biāo)交互效果課題完成動(dòng)畫與鼠標(biāo)交互效果課程名稱Web前端技術(shù)應(yīng)用授課班級(jí)學(xué)時(shí)安排2學(xué)時(shí)執(zhí)教老師授課形式理實(shí)一體教學(xué)目標(biāo)知識(shí)1．能說(shuō)出setTimeout()函數(shù)的語(yǔ)法；2．能輸出常見(jiàn)鼠標(biāo)事件函數(shù)及鍵盤事件的語(yǔ)法；3．說(shuō)出表單事件的語(yǔ)法；技能1．能應(yīng)用鼠標(biāo)事件函數(shù)；2．能正確使用鍵盤事件；3．能熟練使用表單事件；素養(yǎng)1．通過(guò)制作動(dòng)畫與鼠標(biāo)交互效果提升邏輯思維能力和自學(xué)能力；2．養(yǎng)成細(xì)致縝密的編程習(xí)慣；課程思政通過(guò)編寫與調(diào)試程序，讓學(xué)生切身體會(huì)到任何一個(gè)小疏忽都會(huì)導(dǎo)致程序運(yùn)行錯(cuò)誤。讓學(xué)生明確在今后的工作崗位上養(yǎng)成認(rèn)真、細(xì)心和嚴(yán)謹(jǐn)?shù)淖黠L(fēng)。教學(xué)重點(diǎn)鼠標(biāo)事件函數(shù)的應(yīng)用。教學(xué)難點(diǎn)鼠標(biāo)事件函數(shù)的應(yīng)用。教學(xué)方法分析法、討論法、演示法、引導(dǎo)式教學(xué)。教學(xué)環(huán)境軟件環(huán)境：Win7及以上操作系統(tǒng)，HBuilder硬件環(huán)境：多媒體教室或軟件實(shí)訓(xùn)室，計(jì)算機(jī)教學(xué)資源：PPT、微課視頻教學(xué)過(guò)程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖新課導(dǎo)入(3分鐘)提問(wèn)：1.什么是事件函數(shù)學(xué)生閱讀教材找出事件函數(shù)的概念。思考問(wèn)題，閱讀教材教學(xué)

過(guò)渡目標(biāo)展示(2分鐘)PPT展示本課題要完成的目標(biāo)并適當(dāng)解說(shuō)觀看了解活動(dòng)1認(rèn)識(shí)事件函數(shù)的技術(shù)(15分鐘)1.setTimeout函數(shù)提問(wèn)引導(dǎo)學(xué)生思考在瀏覽網(wǎng)頁(yè)時(shí)加載頁(yè)面是如何制作的。代碼如下：setTimeout(()=>{$(".loader").remove()；}，1600)教師講解：這段代碼表示setTimeout()完成1.6秒后移除類名為loader的節(jié)點(diǎn)。setTimeout()方法指在若干毫秒后調(diào)用函數(shù)，只執(zhí)行一次。2.jQuery基本事件教師：什么是jQuery事件呢？通過(guò)閱讀教材可知，事件可以是瀏覽器行為，也可以是用戶行為。常見(jiàn)的鼠標(biāo)事件如下表所示：事件說(shuō)明click鼠標(biāo)單擊事件mouseover鼠標(biāo)移入事件mouseout鼠標(biāo)移出事件mousedown鼠標(biāo)按下事件mouseup鼠標(biāo)松開(kāi)事件3.數(shù)組及index()教師：index返回指定元素相對(duì)于其他指定元素的index位置。這些元素可通過(guò)jQuery選擇器或DOM元素來(lái)指定。如果未找到元素，index()將返回-1。例如，這個(gè)代碼則表示利用index()獲取鼠標(biāo)懸停在某章節(jié)的索引。4.this教師：在JS中，this的意思為“這個(gè)；當(dāng)前”，是一個(gè)指針型變量，它動(dòng)態(tài)地指向當(dāng)前函數(shù)的運(yùn)行環(huán)境。觀看閱讀程序理解代碼并總結(jié)setTimeout函數(shù)的語(yǔ)法結(jié)構(gòu)掌握jQuery事件的基本語(yǔ)法達(dá)成教學(xué)目標(biāo)活動(dòng)2網(wǎng)頁(yè)實(shí)操（20分鐘）1.制作垃圾分類動(dòng)畫展示效果為4張分類圖片綁定懸停事件，制作鼠標(biāo)移上去時(shí)的動(dòng)態(tài)效果$(".page2_navimg").hover(function(){ index=$(this).index(); $(".page2_list.list").eq(index).addClass("list_show") $(".page2_list").css({ "z-index":"2", "opacity":"1" }) },function(){ })為垃圾分類的描述內(nèi)容綁定懸停事件 $(".page2_list").hover(function(){ $(".page2_list").css({ "z-index":"2", "opacity":"1" }) },function(){ $(".page2_list.list").removeClass("list_show") $(".page2_list").css({ "z-index":"-1", "opacity":"0" }) })2.制作加載動(dòng)畫效果控制加載動(dòng)畫顯示1.6s后移出setTimeout(()=>{ $(".loader").remove(); },1600) if(!="a1"){如果頁(yè)面還未加載，設(shè)置加載動(dòng)畫樣式 $(".main").css("animation","main.3s1sforwards") }else{ $(".main").css("opacity","1") $("#loading").css("opacity","0") }3.制作新聞中心選項(xiàng)卡切換效果為3個(gè)選項(xiàng)卡按鈕綁定單擊事件 $(".page3_tab.tab").click(function(){ varindex=+$(this).index(); $(".list_text").css("left",-100*index+"%") $(".page3_tab.tab").removeClass("ac"); $(this).addClass("ac") }) $(".page3_list.list_btn").click(function(){ varindex=$(".page3_list.list_img").attr("index"); if($(this).hasClass("btn2")){ if(index>1)index=-1; index++; }else{ if(index<1)index=3; index--; } $(".list_img").attr("index",index); $(".list_imgimg").css("left",-100*index+"%"); })4.制作政策條例動(dòng)態(tài)交互效果 $(".page1_tab.ul-1li").hover(function(){ varindex=$(this).index(); $(".page1_popup").css("display","block") $(".popup_list.nav_con").removeClass("ac"); $(".popup_list.nav_con").eq(index).addClass("ac"); },function(){ $(".page1_popup").css("display","none") }) $(".page1_popup").hover(function(){ $(".page1_popup").css("display","block") },function(){ $(".page1_popup").css("display","none") }) $(".silie-btn").click(function(){ varindex=+$(".silie").attr("index"); if($(this).hasClass("btn2")){ if(index>2)index=-1; index++; }else{ if(index<1)index=4; index--; } $(".silie").attr("index",index); $(".silieimg").css("left",-100*index+"%"); $(".silie-yuan.yuan").removeClass("ac"); $(".silie-yuan.yuan").eq(index).addClass("ac"); }) $(".silie-yuan.yuan").click(function(){ varindex=$(this).index(); $(".silie").attr("index",index); $(".silieimg").css("left",-100*index+"%"); $(".silie-yuan.yuan").rem