web前端技術(shù)應(yīng)用 教案 項(xiàng)目四 任務(wù)二 完成動(dòng)畫與鼠標(biāo)交互效果

《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．能說出setTimeout()函數(shù)的語法；2．能輸出常見鼠標(biāo)事件函數(shù)及鍵盤事件的語法；3．說出表單事件的語法；技能1．能應(yīng)用鼠標(biāo)事件函數(shù)；2．能正確使用鍵盤事件；3．能熟練使用表單事件；素養(yǎng)1．通過制作動(dòng)畫與鼠標(biāo)交互效果提升邏輯思維能力和自學(xué)能力；2．養(yǎng)成細(xì)致縝密的編程習(xí)慣；課程思政通過編寫與調(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é)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖新課導(dǎo)入(3分鐘)提問：1.什么是事件函數(shù)學(xué)生閱讀教材找出事件函數(shù)的概念。思考問題，閱讀教材教學(xué)

過渡目標(biāo)展示(2分鐘)PPT展示本課題要完成的目標(biāo)并適當(dāng)解說觀看了解活動(dòng)1認(rèn)識(shí)事件函數(shù)的技術(shù)(15分鐘)1.setTimeout函數(shù)提問引導(dǎo)學(xué)生思考在瀏覽網(wǎng)頁時(shí)加載頁面是如何制作的。代碼如下：setTimeout(()=>{$(".loader").remove()；}，1600)教師講解：這段代碼表示setTimeout()完成1.6秒后移除類名為loader的節(jié)點(diǎn)。setTimeout()方法指在若干毫秒后調(diào)用函數(shù)，只執(zhí)行一次。2.jQuery基本事件教師：什么是jQuery事件呢？通過閱讀教材可知，事件可以是瀏覽器行為，也可以是用戶行為。常見的鼠標(biāo)事件如下表所示：事件說明click鼠標(biāo)單擊事件mouseover鼠標(biāo)移入事件mouseout鼠標(biāo)移出事件mousedown鼠標(biāo)按下事件mouseup鼠標(biāo)松開事件3.數(shù)組及index()教師：index返回指定元素相對(duì)于其他指定元素的index位置。這些元素可通過jQuery選擇器或DOM元素來指定。如果未找到元素，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ù)的語法結(jié)構(gòu)掌握jQuery事件的基本語法達(dá)成教學(xué)目標(biāo)活動(dòng)2網(wǎng)頁實(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"){如果頁面還未加載，設(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