《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

提交评论