网页设计与制作——JavaScript+jQuery标准教程 教案 第8章 jQuery动画.docx

《网页设计与制作——JavaScript+jQuery标准教程 教案 第8章 jQuery动画.docx》由会员分享，可在线阅读，更多相关《网页设计与制作——JavaScript+jQuery标准教程 教案 第8章 jQuery动画.docx（6页珍藏版）》请在第一文库网上搜索。

1、电子商务网页设计与制作授课教案学年第学期学院(部)专业(学部)课程名称电子商务网页设计与制作任课教师课内形式理论教学课内实践口理实一体0习题复习口考核评价其他活动口学习量安排课内：课外形式调查分析团小组研讨口实践任务团理论探究口考核评价汇报展示口其他活动团课外：序号8授课日期月日月日月日月日授课班级课内教学内容：第8章jQuery动画课外学习任务：(1)课前：以小组为单位，讨论jQuery框架动画效果的相关知识并以PPT的形式记录下来。(2)课后：点击按钮隐藏图片，再次点击按钮显示图片。点击标题显示和隐藏下拉菜单。教学目标：知识目标 掌握基础动画效果。 掌握淡入淡出动画效果。 掌握滑动动画效果

2、。 掌握自定义动画效果。 掌握停止动画。能力目标 能够掌握动画效果的使用； 能够灵活使用自定义的动画效果。素质目标 较强的专业知识和自学能力； 丰富知识结构，提升专业知识； 掌握jQuery动画效果的使用，理解并应用专业知识。重点难点及解决方法：（I）重点：jQuery动画效果的应用解决方法：通过知识点讲解+课堂示例相结合的方法，教师讲解jQuery框架动画效果的应用，引导学生积极思考,掌握相应知识；同时通过课堂示例展示,使学生可以掌握使用jQuery动画实现网页动态效果；培养学生的思维能力和分析问题解决问题的能力。（2）难点：图片顺序切换效果解决方法：通过案例解析+启发式教学讲解的方式，细致

3、讲解使用jQuery框架动画效果实现图片顺序切换效果。帮助学生掌握JQuery动画的操作方法和技巧。从实用的角度帮助学生提高专业知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号

4、，应与授课计划一致；2.授课形式在相应白选项打“J课内教学内容及过程时间分配方法及手段【导引示例】jQuery将CSS的动画集成为了相应的方法，因此可以通过jQuery实现动画效果。例如，使用jQuery中集成的动画方法实现元素的移动和透明度变化效果。1基础动画效果【隐藏元素】以动画形式隐藏元素的方法为hide（）,使用它可以实现按照指定的速度或在指定时间内隐藏特定的元素。默认图片元素从右下角到左上角逐渐隐藏，文字元素从下到上逐渐隐藏。其语法形式如下所示。$（se1ector）.hide（speed,ca11back）其中，se1ector为选择器，用于选择要隐藏的元素。SPeed用于设置隐藏

5、元素花费的时间，该值可以为数字，表示时间长短（单位为ms）,也可以为表示速度的固定字符串，如SIoW（慢）、norma1（正常）和fast（快）。ca11back表示hide。方法执行完毕后所要执行的函数。【显示元素】以动画形式显示元素的方法为ShOW(),使用它可以实现按照指定的速度或在指定时间内显示指定的元素。默认图片元素从左上角到右下角逐渐显示，文字元素从上到下逐渐显示。其语法形式如下所示。$(se1ector).show(speed,ca11back)ShoW()方法的参数与hide。方法的相同。ShoW()方法适用于显示通过jQuery隐藏的元素或CSS中disp1ay属性为none

6、的元素，但是不适用于显示ViSibiIity属性为hidden的元素。【状态切换】元素有显示和隐藏两种状态。如果要使用开关按钮控制元素的显示状态，则可以使用togg1e。方法。该方法用于以开关的方式切换元素的显示和隐藏状态。其语法形式如下所示。$(se1ector).togg1e(speed,ca11back,switch)其中，se1ector用于选择要切换状态的元素；SPeed表示切换状态的速度；Ca1IbaCk表示切换完成后要执行的函数；SWiteh为布尔值，用于将togg1e。方法的双向开关改为单向开关。switch参数值设置为true时可以显示所有指定元素，但是不能隐藏指定元素；如果

7、该参数值设置为fa1se,作用刚好相反。另外，如果设置switch参数，则不能设置speed和ca11back参数。【案例分析8-1】侧边栏侧边栏是网页中十分常见的一个模块。通过侧边栏可以实现导航、商品展示等多种效果。当要展示种类繁多的商品时，使用侧边栏可以利用有限的空间通过隐藏和显示指定元素的方式，提高网页的空间使用率，以较小的空间显示较多的商品。本案例通过显示和隐藏元素的方法实现一个侧边栏。2.淡入/淡出动画效果【淡入显示元素】淡入显示元素需要使用fade1n()方法实现。fade1n()方法可以对隐藏的元素进行操作，让指定元素以动画效果淡入显示，其语法形式如下所示。S(Se1ector)

8、JadeIn(Speedxa11back)其中，Se1eCIOr用于选择要淡入显示的元素，speed表示显示的速度，ca11back表示显示完成后要执行的函数。【淡出隐藏元素】淡出动画效果使用fadeut()方法实现，其语法形式如下所示。S(se1ector).fadeut(speed,ca11back)其中，se1ector用于选择要淡出隐藏的元素，speed表示隐藏的速度，ca11back表示隐藏完成后要执行的函数。【淡入/淡出切换元素】动态切换淡入淡出元素可以使用fadeTogg1e()方法实现。其语法形式如下所示。$(se1ector).fadeTbgg1e(speed,easing,

9、ca11back)其中，se1ector用于选择元素；SPeed用于控制动画速度；easing用于控制动画曲线，有SWing(开头和结尾慢，中间快)和Iinear(线性)两个选项；Ca1IbaCk为动画完成后要执行的函数。精准控制淡入/淡出动画效果】在jQuery中还可以使用fadeTo()方法精准控制元素的淡入淡出动画效果，其本质就是通过参数设置淡入淡出时对应的透明度。其语法形式如下所示。$(se1ector).fade1b(speed,opacity,ca11back)其中，SeIeetOr用于选择元素；SPeed用于控制动画效果；OPaCi1y用于指定淡入淡出时的透明度，该值为0.00到

10、1.00之间；CaI1baCk为执行完动画后要执行的函数。其中，OPaCity的值如果大于被选元素的透明度值，就会实现淡入动画效果，否则会实现淡出动画效果。【案例分析8-2】补全古诗并显示和隐藏译文很多考试网页会提供一些在线试题供用户进行测试。这些试题中会保留很多需要填空的位置，用于用户作答。本案例以一首古诗为例，用淡入淡出动画效果实现补全古诗并显示和隐藏译文的效果。3.滑动动画效果和自定义动画效果【滑动显示和隐藏匹配的元素】在jQuery中使用S1ideUP()方法和S1ideDoWn()方法可以实现元素上下滑动的效果。使用SIideUP()方法实现以滑动方式隐藏被选元素，其语法形式如下所示

11、。S(se1ector).s1ideUp(speed,easing,ca11back)使用S1ideDoWn()方法实现以滑动方式显示被选元素,其语法形式如下所示。$(se1ector).s1ideDown(speed,easing,ca11back)其中，se1ector表示被选元素；SPeed为滑动的速度；easing为动画曲线，有SWing和Iinear两个选项；Ca11baCk为滑动完成后触发的函数。【滑动切换元素的可见性】在jQuery中使用S1ideToggIe()方法以滑动动画效果的形式切换指定元素的隐藏和显示状态。其语法形式如下所示。$(se1ector).s1ide1bgg1

12、e(speed,easing,ca11back)其中，Se1eCtOr表示被选元素；Speed为滑动的速度：easing为动画曲线，有swing和Iinear两个选项；CanbaCk为滑动完成后触发的函数。【自定义动画效果】在jQuery中使用animate。方法对CSS的动画效果进行封装。通过animate。方法可以轻松地实现丰富的动画效果，其语法形式如下所示。(se1ector).animate(sty1es,speed,easing,ca11back)其中，Se1ectoi用于选择对应的元素；Sty1eS用于指定动画效果会影响CSS的属性，几乎所有的CSS层叠样式都可以在animate。

13、方法中使用，只不过必须使用驼峰法书写所有的属性名。【停止动画】如果需要在动画执行过程中停止动画的执行，则可以通过StoP()方法实现。使用该方法可以停止执行指定元素上的动画，其语法形式如下所示。$(se1ector).stop(stopA11,goToEnd);其中，se1ect。!表示被选元素；StoPAn的默认值为fa1se,用于停止正在执行的动画，如果是动画队列，则只停止当前执行的动画，继续执行动画队列中的下一个动画，如果设置为true,则停止执行动画队列中的所有动画；g。ToEnd用于规定是否直接完成当前运行的动画，默认值为fa1se。【案例分析8-3】实现下拉菜单左右抖动后的隐藏和显

14、示下拉菜单是一种十分常见的列表内容展示工具，通过下拉菜单可以实现多个内容或功能的导航效果。本案例为下拉菜单的隐藏和显示添加左右抖动动画效果，代码如下所示。【案例分析8-4图片顺序切换效果在以图片为主的网页中常常会使用到多个图片堆叠的显示方法。通过点击图片或滑动图片可以依次查看堆叠的所有图片。本案例使用元素的显示和隐藏动画以及自定义动画效果实现堆叠图片顺序切换。4 .素养课堂jQuery动画方法源自CSS的动画，jQuery基础库中的动画简单分为4种，更加丰富的动画效果可以通过jQueryUI插件或其他插件实现。jQuery动画弥补了JaVaSCriPt元素没有动画效果的缺陷，并且提供了十分丰富

15、的动画插件，可以帮助开发者在实现动画效果时摆脱大量的代码编写负担。可以说，丰富的插件是jQuery大受欢迎的重要原因之一。在生活、学习中，无论面对什么样的问题，如果拥有十分丰富的资源储备，那么就可以降低问题的难度，甚至直接解决问题。而丰富的资源储备往往源于平时点滴的积累，正如古人所说，“不积蹉步，无以至千里；不积小流，无以成江海二在日常生活、学习中，我们要注意知识的积累，通过积累一些小的知识形成大的资源库。当遇到问题时，可以从丰富的资源库中寻找对应的解决方法。总而言之，读万卷书行万里路，无论何时、何地都要注意对知识的学习和积累，所有学到的知识最终都将指引我们迈向成功。5 .教学评价【组织阶段考核与学生自评互评、展示考核结果】本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。展示本次课职业素养评价表，组织学生自评、互评。6 .思考与练习【疑难解答】动画曲线是否只有swing和Iinear两种？使用jQuery动画可以实现颜色动画效果吗？【课后习题】1 .实现点击按钮隐藏图片，再次点击按钮显示图片。2 .实现点击标题显示和隐藏