web前端技术应用 教案 项目四 任务二 完成动画与鼠标交互效果

《Web前端技术应用》教学设计项目四任务二完成动画与鼠标交互效果课题完成动画与鼠标交互效果课程名称Web前端技术应用授课班级学时安排2学时执教老师授课形式理实一体教学目标知识1．能说出setTimeout()函数的语法；2．能输出常见鼠标事件函数及键盘事件的语法；3．说出表单事件的语法；技能1．能应用鼠标事件函数；2．能正确使用键盘事件；3．能熟练使用表单事件；素养1．通过制作动画与鼠标交互效果提升逻辑思维能力和自学能力；2．养成细致缜密的编程习惯；课程思政通过编写与调试程序，让学生切身体会到任何一个小疏忽都会导致程序运行错误。让学生明确在今后的工作岗位上养成认真、细心和严谨的作风。教学重点鼠标事件函数的应用。教学难点鼠标事件函数的应用。教学方法分析法、讨论法、演示法、引导式教学。教学环境软件环境：Win7及以上操作系统，HBuilder硬件环境：多媒体教室或软件实训室，计算机教学资源：PPT、微课视频教学过程教学环节教师活动学生活动设计意图新课导入(3分钟)提问：1.什么是事件函数学生阅读教材找出事件函数的概念。思考问题，阅读教材教学

过渡目标展示(2分钟)PPT展示本课题要完成的目标并适当解说观看了解活动1认识事件函数的技术(15分钟)1.setTimeout函数提问引导学生思考在浏览网页时加载页面是如何制作的。代码如下：setTimeout(()=>{$(".loader").remove()；}，1600)教师讲解：这段代码表示setTimeout()完成1.6秒后移除类名为loader的节点。setTimeout()方法指在若干毫秒后调用函数，只执行一次。2.jQuery基本事件教师：什么是jQuery事件呢？通过阅读教材可知，事件可以是浏览器行为，也可以是用户行为。常见的鼠标事件如下表所示：事件说明click鼠标单击事件mouseover鼠标移入事件mouseout鼠标移出事件mousedown鼠标按下事件mouseup鼠标松开事件3.数组及index()教师：index返回指定元素相对于其他指定元素的index位置。这些元素可通过jQuery选择器或DOM元素来指定。如果未找到元素，index()将返回-1。例如，这个代码则表示利用index()获取鼠标悬停在某章节的索引。4.this教师：在JS中，this的意思为“这个；当前”，是一个指针型变量，它动态地指向当前函数的运行环境。观看阅读程序理解代码并总结setTimeout函数的语法结构掌握jQuery事件的基本语法达成教学目标活动2网页实操（20分钟）1.制作垃圾分类动画展示效果为4张分类图片绑定悬停事件，制作鼠标移上去时的动态效果$(".page2_navimg").hover(function(){ index=$(this).index(); $(".page2_list.list").eq(index).addClass("list_show") $(".page2_list").css({ "z-index":"2", "opacity":"1" }) },function(){ })为垃圾分类的描述内容绑定悬停事件 $(".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.制作加载动画效果控制加载动画显示1.6s后移出setTimeout(()=>{ $(".loader").remove(); },1600) if(!="a1"){如果页面还未加载，设置加载动画样式 $(".main").css("animation","main.3s1sforwards") }else{ $(".main").css("opacity","1") $("#loading").css("opacity","0") }3.制作新闻中心选项卡切换效果为3个选项卡按钮绑定单击事件 $(".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.制作政策条例动态交互效果 $(".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