第9章 JavaScript特效-【千锋教育】HTML5+CSS3+JavaScript 网页设计基础与实战（微课版）同步教案

课程名称 第9章 JavaScript特效 计划学时 6学时 内容分析 本章介绍了offset家族、scroll家族和client家族，匀速动画和缓动动画及其封装，滚动方法及其封装，event事件对象 教学目标 与 教学要求 【知识目标】 1. 了解event事件对象 【技能目标】 1. 掌握3大家族的使用 2. 掌握匀速动画、缓动动画、滚动方法的应用及其封装方法 【思政育人目标】 1. 培养学生健康的审美观念 2. 引导学生在学习中健全职业道德的规范。 3. 引导学生创新思维和探索的科学精神。 教学重点 掌握匀速动画、缓动动画、滚动方法的应用及其封装方法 教学难点 实现本章节的3个小节案例 教学方式 课堂讲解配合ppt演示1学时 教 学 过 程 第一学时 （offset家族、匀速动画与封装） 一、提出需求，导入学习任务 （1）思考如何通过JavaScript的3大家族配合运动效果实现动态特效。 · 通过对3大家族不同属性的灵活使用，以及调用匀速动画、缓动动画或页面滚动方法，可以模拟出很多酷炫的JavaScript特效，增强界面的视觉感染力，实现让静态页面“活”起来的效果。 （2）明确学习方向。 · 掌握offset家族的使用 · 掌握匀速动画与封装 二、知识讲解 （一）offset家族 1.定义 offset家族可用于获取元素尺寸，offset的中文是偏移，补偿，位移。offset家族有offseWidth、offsetHeight、offsetLeft、offsetTop和offsetParent这5个属性。 2.属性 · offseWidth · offsetHeight · offsetLeft · offsetTop · offsetParent （二）JavaScript基础动画 JavaScript的基础动画有3种运动形式，即闪动动画、匀速动画和缓动动画，动画的运动原理为“元素目标位置=当前位置+步长”。 1.闪动动画 闪动动画又叫闪现动画，能瞬间到达目标位置，可以实现短距离内的位置切换，与位移效果类似。例如，一个元素实现闪动动画，瞬间闪动到右侧300px处的目标位置，主要代码为box.style.left="500px"。 2.匀速动画 匀速动画的效果是元素每一步运动的距离都是相同的，即元素是匀速运动的。匀速动画的公式为“元素目标位置=当前位置+相同步长”。 3.匀速动画封装 匀速动画的封装代码可在jQuery库文件中编写，封装代码可参考教材。 4.offsetLeft和style.left的区别 offsetLeft和style.left是2种不同的形式，在使用时应该明确它们之间的差异，offsetLeft和style.left的区别如下所示。 · offsetLeft对于没有定位的元素可以获取到偏移值，而style.left不可以。这是它们之间最大的区别。 · offsetLeft返回的是数值，style.left返回的是像素值类型的字符串。 · offsetLeft是只读的，而style.left可读可写。只读是只能获取值，可写是能够赋值。 · style.left只能获取元素的行内样式，若没有设置则返回空字符串。 值得注意的是，style.left在等号左边时是作为属性，在等号右边时是作为值。offsetTop和style.top的用法与offsetLeft和style.left类似。 三、知识巩固 （1）回顾上课前的学习目标，对本节课知识点进行总结。 （2）使用本章课后作业。 第二学时 （缓动动画与封装、案例） 一、回顾上节课内容 （1）对上节课布置的作业以及学生提出的问题进行答疑解惑。 （2）回顾上节课内容，引出本节课主题。 （3）明确学习方向。 · 掌握缓动动画与封装 二、知识讲解 （一）缓动动画与封装 1.缓动动画 缓动动画与匀速动画的运动原理类似，区别在于缓动动画的运动速度是先快后慢，直至停止运动。缓动动画的公式为“元素目标位置=当前位置+步长（步长越来越小）”，而步长的计算方式为“步长=（元素目标位置-当前位置）/10”，步长的值会变得越来越小，运动速度也会越来越慢。由于此计算方式所得的步长值并不总是整数，可能会导致元素实际到达位置和目标位置不能完全相同，所以需要对步长（step）值进行取整，大于0时可向上取整，小于0时可向下取整。 2.缓动动画封装 缓动动画的封装代码可参考教材。 （三）案例讲解 讲解导航菜单图标缓动案例。 三、知识巩固 （1）回顾上课前的学习目标，对本节课知识点进行总结。 （2）使用本章课后作业。 第三学时 （scroll家族、滚动方法与封装） 一、回顾上节课内容 （1）对上节课布置的作业以及学生提出的问题进行答疑解惑。 （2）回顾上节