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

第9章JavaScript特效 >9.1制作缓动动画 >9.2实现页面滚动 >9.3使用event对象 学习目标 LEARNING OBJECTIVES 了解JavaScript的3大家族 了解event事件对象的使用 掌握offset家族、scroll家族和 client家族中的各个属性 掌握匀速和缓动动画的运用 初心至善匠心有人 引言 JavaScript的3大家族主要是offset家族、scroll家族和client家族，3大家 族都是以DO元素节点的属性形式存在的，通过对3大家族不同属性的灵活使 用，以及调用匀速动画、缓动动画或页面动方法，可以模拟出很多酷炫的 JavaScript特效，增强界面的视觉感染力，实现让静态页面“活”起来的效果。 9.1 制作缓动动画 offset?家族 匀速动画以及封装 目录 Contents 缓动动画以及封装 案例一导航菜单图标缓动 初心至善匠心育人 9.1制作缓动动画 9.1.1 offset家族 of仟set家族可用于获取元素尺寸，offset的中文是偏移，补偿，位移。offset家族有 offseWidth、offsetHeight、offsetLeft、.offsetTopi和offsetParenti这5个属性. 属性 说明 offseWidth 获取当前元素的总宽度，属于只读属性，其属性值为数值。总宽度包括自身 宽度、内边距和边框，即offsetWidth=width+padding+border 获取当前元素的总高度，属于只读属性，其属性值为数值。总高度包括自身 offsetHeight 高度、内边距和边框，即offsetHeight=height+padding+border 获取当前元素距离最近的有定位的父级元素左侧的距离，该属性与元素本身 offsetLeft 有无定位无关。如果父级元素都没有定位则以body左侧距离计算 offsetTop 获取当前元素距离最近的有定位的父级元素顶部的距离，该属性与元素本身 有无定位无关。如果父级元素都没有定位则以body顶部距离计算 获取距离最近的有定位的父级元素对象，该属性与元素本身有无定位无关。 offsetParent 如果父级元素都没有定位则返回body对象 9.1制作缓动动画 9.1.2匀速动画以及封装 闪动动画 JavaScript的基础动画有3种运动形式，即闪动动画、匀速动画和缓动动画。动画的 运动原理为“元素目标位置=当前位置+步长”。 闪动动画又叫闪现动画，能瞬间到达目标位置，可以实现短距离内的位置切换，与位 移效果类似。例如，一个元素实现闪动动画，瞬间闪动到右侧300x处的目标位置，主 要代码为box.style.let="500px"。 9.1制作缓动动画 9.1.2匀速动画以及封装 匀速动画 匀速动画的效果是元素每一步运动的距离都是相同的，即元素是匀速运动的。匀速动 画的公式为”“元素目标位置=当前位置+相同步长”。 匀速动画以元素左右匀速运动为例，首先动画效果主要是由setInterval定时器来实 现的，每隔指定毫秒数让物体移动一定的距离（步长），通过不断调用定时器来达到让元 素运动的效果。然后将setInterval定时器放在一个函数内，定义元素的运动步长 (stp)，可设置每次运动的步长为10，此时需要判断元素的运动方向（向左运动或向 右运动)来确定步长的正负，若元素目标位置的值大于当前位置的值，则步长为正值，反 之步长为负值。再确定元素的移动距离，即把元素的of什setLeft.与step赋值给left样式值。 最后当元素到达目标位置时清除定时器。值得注意的是，实现匀速动画的元素，其CSS 样式中一定要有绝对定位。 9.1制作缓动动画 9.1.2匀速动画以及封装 匀速动画酷封装 匀速动画的封装代码可在jQueryl库文件中编写，代码如下所示。 /∥匀速动画封装方法传入2个参数，ee为运动的元素，endx为目标位置 function animation speed(ele,endx) /1要用定时器，须清除之前的定时器 clearinterval(ele.timer) 2判断并获取步长，若元素目标位置的值大于当前位置的值，则步长为正值，反之步长为负值。此处设置的步长为10.可根 据需要设置指定步长参数 var step=(endx-ele.offsetLeft)>0?10:-10: /3.启动定时器 ele.timer=setinterval(function(X /4元素的运动距离 ele.style.left=ele.offsetLeft+step+"px": /5.检测匀速动回是否停止，若（目标位置-当前位置）的绝对值<=步长绝对值，说明此时已到达目标位置，则清除定时器。 if(Mathabs