HTML5 CSS3 JavaScript第9章ppt课件.pptx

《HTML5 CSS3 JavaScript第9章ppt课件.pptx》由会员分享，可在线阅读，更多相关《HTML5 CSS3 JavaScript第9章ppt课件.pptx（54页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、HTML5 CSS3 JavaScript第9章教学课件第9章 JavaScript特效9.1 制作缓动动画9.2 实现页面滚动9.3 使用event对象了解JavaScript的3大家族了解event事件对象的使用掌握offset家族、家族、scroll家族和家族和client家族家族中的各个属性属性掌握匀速和匀速和缓动动缓动动画画的运用引言JavaScript的3大家族主要是offset家族、scroll家族和client家族，3大家族都是以DOM元素节点的属性形式存在的，通过对3大家族不同属性的灵活使用，以及调用匀速动画、缓动动画或页面滚动方法，可以模拟出很多酷炫的JavaScript特

2、效，增强界面的视觉感染力，实现让静态页面“活”起来的效果。9.1制作缓动动画offset家族案例导航菜单图标缓动缓动动画以及封装匀速动画以及封装9.1 制作缓动动画offset家族可用于获取元素尺寸，offset的中文是偏移，补偿，位移。offset家族有offseWidth、offsetHeight、offsetLeft、offsetTop和offsetParent这5个属性。9.1.1 offset家族属性属性说明明offseWidth获取当前元素的总宽度，属于只读属性，其属性值为数值。总宽度包括自身宽度、内边距和边框，即offsetWidth=width+padding+borderof

3、fsetHeight获取当前元素的总高度，属于只读属性，其属性值为数值。总高度包括自身高度、内边距和边框，即offsetHeight=height+padding+borderoffsetLeft获取当前元素距离最近的有定位的父级元素左侧的距离，该属性与元素本身有无定位无关。如果父级元素都没有定位则以body左侧距离计算offsetTop获取当前元素距离最近的有定位的父级元素顶部的距离，该属性与元素本身有无定位无关。如果父级元素都没有定位则以body顶部距离计算offsetParent获取距离最近的有定位的父级元素对象，该属性与元素本身有无定位无关。如果父级元素都没有定位则返回body对象9.

4、1 制作缓动动画JavaScript的基础动画有3种运动形式，即闪动动画、匀速动画和缓动动画。动画的运动原理为“元素目标位置=当前位置+步长”。闪动动画又叫闪现动画，能瞬间到达目标位置，可以实现短距离内的位置切换，与位移效果类似。例如，一个元素实现闪动动画，瞬间闪动到右侧300px处的目标位置，主要代码为box.style.left=500px。9.1.2 匀速动画以及封装闪动动画9.1 制作缓动动画匀速动画的效果是元素每一步运动的距离都是相同的，即元素是匀速运动的。匀速动画的公式为“元素目标位置=当前位置+相同步长”。匀速动画以元素左右匀速运动为例，首先动画效果主要是由setInterval

5、定时器来实现的，每隔指定毫秒数让物体移动一定的距离（步长），通过不断调用定时器来达到让元素运动的效果。然后将setInterval定时器放在一个函数内，定义元素的运动步长（step），可设置每次运动的步长为10，此时需要判断元素的运动方向（向左运动或向右运动）来确定步长的正负，若元素目标位置的值大于当前位置的值，则步长为正值，反之步长为负值。再确定元素的移动距离，即把元素的offsetLeft与step赋值给left样式值。最后当元素到达目标位置时清除定时器。值得注意的是，实现匀速动画的元素，其CSS样式中一定要有绝对定位。9.1.2 匀速动画以及封装匀速动画9.1 制作缓动动画匀速动画的封装

6、代码可在jQuery库文件中编写，代码如下所示。9.1.2 匀速动画以及封装匀速动画封装/匀速动画封装方法传入2个参数，ele为运动的元素，endx为目标位置function animation_speed(ele,endx)/1.要用定时器，须清除之前的定时器 clearInterval(ele.timer)/2.判断并获取步长，若元素目标位置的值大于当前位置的值，则步长为正值，反之步长为负值。此处设置的步长为10，可根据需要设置指定步长参数 var step=(endx-ele.offsetLeft)0?10:-10;/3.启动定时器 ele.timer=setInterval(funct

7、ion()/4.元素的运动距离 ele.style.left=ele.offsetLeft+step+px;/5.检测匀速动画是否停止，若（目标位置-当前位置）的绝对值=步长绝对值，说明此时已到达目标位置，则清除定时器。if(Math.abs(endx-ele.offsetLeft)0?Math.ceil(step):Math.floor(step);console.log(step)/5.元素的运动距离 ele.style.left=ele.offsetLeft+step+px;/6.检测缓动速动画是否停止，若（目标位置-当前位置）的绝对值=步长绝对值，说明此时已到达目标位置，则清除定时器。

8、if(Math.abs(endx-ele.offsetLeft)=Math.abs(step)clearInterval(ele.timer);/7.设置其到达目标位置 ele.style.left=endx+px;,100)9.1 制作缓动动画9.1.4 案例-导航菜单图标缓动本实例是一个点击导航菜单能使背景图标缓动移动的页面。该页面主要由块元素、内联元素、无序列表和图像标签构成，图标缓动的页面结构简图如图所示。导航菜单图标缓动 企业官网 首页信息 代码实现9.1 制作缓动动画9.1.4 案例-导航菜单图标缓动主体代码 例9.19.1 制作缓动动画9.1.4 案例-导航菜单图标缓动代码实现在

9、上述主体代码中，内联元素用于制作一个导航菜单的背景图标，块元素和无序列表用于制作导航栏，而每一个项目列表则用于制作导航菜单，图像标签内嵌入一张图片，作为页面的主要信息展示。/*设置页面*/#busy width:700px;margin:10px auto;/*设置导航栏*/.nav width:700px;height:50px;background-color:#ccc;border-radius:10px;/*添加圆角*/margin:0 auto 5px;position:relative;/*添加相对定位*/*设置无序列表*/ul list-style:none;/*取消列表标记*/

10、position:relative;/*添加相对定位*/代码实现9.1 制作缓动动画9.1.4 案例-导航菜单图标缓动CSS部分代码 例9.1/*统一设置每个项目列表（导航菜单）*/ulli float:left;/*设置向左浮动*/width:100px;height:50px;line-height:50px;text-align:center;color:#222;font-size:16px;cursor:pointer;/*鼠标改变形状*/*设置缓动的背景图标部分*/.icon display:inline-block;/*内联元素转换为内联块元素*/width:100px;heig

11、ht:42px;background-image:url(./image/1.png);/*添加背景图片（图标）*/background-size:cover;/*设置背景图片尺寸*/position:absolute;/*添加绝对定位*/top:4px;/*设置偏移位置*/left:0;9.1 制作缓动动画9.1.4 案例-导航菜单图标缓动代码实现在上述CSS代码中，首先使用CSS属性设置整个页面和标题的样式，再设置导航栏块，使用border-radius属性为导航栏块添加圆角，并使用position属性为其添加相对定位。接着将无序列表定位到导航栏内，然后统一设置每个项目列表，即每个导航菜单

12、向左浮动。最后设置背景图标部分，为元素添加背景图片，即图标的图片，并使用background-size属性设置背景图片尺寸，以及使用绝对定位，具体设置背景图标在导航菜单中的位置。/1.获取元素，背景图标、无序列表、项目列表var icon=document.getElementsByClassName(icon)0;var ul=document.getElementsByTagName(ul)0;var liArr=ul.children;/定义背景图标移动的距离var moveWidth=liArr0.offsetWidth;/2.for循环遍历liArr项目列表，为其绑定索引值for(v

13、ar i=0;iliArr.length;i+)liArri.index=i;/3.为项目列表添加鼠标移入事件 liArri.onmouseover=function()/4.获取当前移入的索引值，为当前背景图标调用缓动动画终点设置值 animation_slow(icon,this.index*moveWidth);代码实现9.1 制作缓动动画9.1.4 案例-导航菜单图标缓动JS代码 例9.1/5.创建记录器用来记录点击时的位置 var nowIndex=0;/6.为项目列表添加鼠标离开事件 liArri.onmouseout=function()/7.背景图标回到最开始的位置 anima

14、tion_slow(icon,nowIndex*moveWidth);/8.为项目列表添加鼠标单击事件 liArri.onclick=function()/9.点击时，把 背景图标最开始位置记录为当前点击位置 nowIndex=this.index;/加入缓动动画封装代码 参考9.1.3节的缓动动画封装代码。9.1 制作缓动动画9.1.4 案例-导航菜单图标缓动代码实现在上述JS代码中，首先获取各个元素，定义背景图标移动的距离。for循环遍历liArr项目列表，并为其绑定索引值。接着为项目列表添加鼠标移入事件，获取到当前移入的索引值，为当前背景图标调用缓动动画终点值，以及创建记录器用来记录鼠标

15、单击时的位置。再为项目列表添加鼠标离开事件，此时背景图标回到最开始的位置。然后为项目列表添加鼠标单击事件，此时把背景图标最开始的位置记录为当前单击的位置。最后加入缓动动画的封装代码，即可实现背景图标在导航菜单中缓动移动。本节小结本节内容主要讲解了offset家族的相关属性，匀速动画以及其封装代码，缓动动画以及其封装代码。通过本节的学习，希望读者可以了解JavaScript的基础动画，如闪动动画、匀速动画和缓动动画，在网页上实现更多样的动态效果。9.2实现页面滚动scroll家族案例滚动页面导航栏固定纵向滚动的缓动动画封装滚动方法以及封装9.2 实现页面滚动scroll家族可用于获取元素内容的宽

16、度和高度，scroll的中文是滚动。scroll家族有scrollWidth、scrollHeight、scrollLeft和scrollTop这4个属性。9.2.1 scroll家族属性属性说明明scrollWidth获取当前元素内容的宽度，属于只读属性，其属性值为数值。宽度包括由于溢出而无法展示在网页的不可见部分，但不包括内边距和边框scrollHeight获取当前元素内容的高度，属于只读属性，其属性值为数值。高度包括由于溢出而无法展示在网页的不可见部分，但不包括内边距和边框scrollLeft获取当前元素被卷去的左侧距离，即在网页中被浏览器遮挡的左侧部分scrollTop获取当前元素被卷

17、去的头部距离，即在网页中被浏览器遮挡的头部部分9.2 实现页面滚动使用scrollLeft和scrollTop的前提是，当前元素必须带有滚动条，即CSS样式中需要有overflow:auto/scroll，才能获取被卷去的距离。在实际开发中，由于元素能滚动的效果很少，通常都是页面滚动，使用body或HTML调用scrollLeft和scrollTop方法，使用方法如下所示。9.2.1 scroll家族body调用：document.body.scrollLeft;HTML调用：document.documentElement.scrollLeft;9.2 实现页面滚动在信息的高速交流中，不同领

18、域之间的信息交换越来越紧密，如何才能保证这些不同领域之间的信息可以更容易且更有效率地交换成为我们首要关注的问题。为了解决这个问题，就需要不同的领域来针对领域的特性制定共同的信息内容模型（content model），然后再通过这个共同的内容模型来标识信息。而DTD就是一种内容模型。DTD（Document Type Definition，文档类型定义）是一套关于标记符的语法规则，可以定义合法的XML文档结构，它使用一系列合法元素来定义文档的结构。DTD分为内部DTD和外部DTD，所谓内部DTD是指该DTD在某个文档的内部，只被该文档使用。外部DTD是指该DTD不在文档内部，可以被其他所有的文档

19、来共享。DTD位于HTML文档的第一行，即。9.2.1 scroll家族兼容性问题1.关于DTD9.2 实现页面滚动9.2.1 scroll家族兼容性问题2.兼容性已声明DTD头部时，谷歌、火狐和IE浏览器可获取元素，即document.documentElement.scrollLeft或document.documentElement.scrollTop。未声明DTD头部时，谷歌、火狐和IE9以上版本的浏览器可获取元素，即document.body.scrollLeft或document.body.scrollTop。不论是否声明DTD头部，谷歌、火狐和IE9以上版本的浏览器都支持wind

20、ow.pageXOffset或window.pageYOffset9.2 实现页面滚动9.2.1 scroll家族兼容性问题3.兼容写法获取元素被卷去的左边距离和头部距离的兼容写法如下所示。获取元素被卷去的左边距离：var scrollLeft=window.pageXOffset|document.documentElement.scrollLeft|document.body.scrollLeft|0;获取元素被卷去的头部距离：var scrollTop=window.pageYOffset|document.documentElement.scrollTop|document.body.

21、scrollTop|0;9.2 实现页面滚动滚动方法的封装代码如下所示。9.2.2 滚动方法以及封装/scroll滚动方法的封装function scroll()/如果该属性存在，即有返回值（0无穷大），便可调用此方法 if(window.pageYOffset!=undefined)return top:window.pageYOffset,left:window.pageXOffset ;else if(patMode=CSS1Compat)return /已声明DTD头部（）时 top:document.documentElement.scrollTop,left:document.do

22、cumentElement.scrollLeft ;else return /剩下的怪异浏览器 top:document.body.scrollTop,left:document.body.scrollLeft ;9.2 实现页面滚动关于页面纵向滚动的缓动动画，其封装代码如下所示。9.2.3 纵向滚动的缓动动画封装/关于页面纵向滚动的缓动动画封装function slow_scrolly(window,endy)/1.要用定时器，先清除定时器 clearInterval(window.timer);/2.启动定时器 window.timer=setInterval(function()/3.获

23、取步长，步长=（目标位置-头部滚动距离）/10 var step=(endy-scroll().top)/10;/4.步长二次加工，大于0向上取整，小于0向下取整 step=step0?Math.ceil(step):Math.floor(step);/5.元素的滚动距离，头部滚动距离+步长 window.scrollTo(0,scroll().top+step);console.log(Math.abs(endy-scroll().top),step);/6.检测缓动动画是否停止，若（目标位置-头部滚动距离）的绝对值=步长绝对值，说明此时已到达目标位置，则清除定时器。if(Math.abs(

24、endy-scroll().top)=Math.abs(step)clearInterval(window.timer);/7.设置其到达目标位置 window.scrollTo(0,endy);,25)9.2 实现页面滚动9.2.4 案例-滚动页面导航栏固定本实例是一个滚动页面导航栏固定的页面。当页面的顶部区域因滚动而被卷去之后，导航栏能够固定在页面顶部，而不再随滚动条的滚动而移动。该页面主要由块元素和图像标签构成，页面结构简图如图所示。固定导航栏 代码实现9.2 实现页面滚动9.2.4 案例-滚动页面导航栏固定主体代码 例9.29.2 实现页面滚动9.2.4 案例-滚动页面导航栏固定代码实

25、现在上述主体代码中，页面整体分为3个部分，即头部、导航栏和主体内容，每个部分分别嵌入1个图像标签，即用图片代表页面内容。/*设置整个页面*/#read width:650px;margin:0 auto;/*设置头部、导航栏和主体3部分的图片*/img width:650px;vertical-align:top;/*清除图片底部空白间隙*/*设置导航栏*/#nav overflow:hidden;/*清除定位带来的异常影响*/*设置主体部分的外边距*/#main margin:0 auto;/*导航栏添加class类名，设置新样式*/.fixed position:fixed;/*添加固定定

26、位*/top:0;/*使用位置属性设置固定定位的具体位置*/代码实现9.2 实现页面滚动9.2.4 案例-滚动页面导航栏固定CSS部分代码 例9.29.2 实现页面滚动9.2.4 案例-滚动页面导航栏固定代码实现在上述CSS代码中，首先设置整个页面的宽度和外边距，再统一设置头部、导航栏和主体3个部分的图片宽度，以及使用vertical-align属性清除图片底部的空白间隙。接着为导航栏设置overflow属性，清除定位带来的异常影响。然后设置主体部分的外边距为0，与导航栏无空白间隙。最后通过导航栏新添加的class类名，设置新样式，为导航栏设置固定定位，以及使用位置属性设置具体位置。/页面加载

27、完成之后再执行window.onload=function()/1.获取导航栏、主体元素 var nav=document.getElementById(nav);var main=document.getElementById(main);/获取导航栏顶部的距离，即头部的高度 var topHeight=nav.offsetTop;/2.给window添加滚动事件 window.onscroll=function()/3.调用封装的scroll方法获取被卷去的头部距离，并判断被卷去的距离 /若被卷去的头部距离大于导航栏到顶部的距离 if(scroll().top=topHeight)/则为导

28、航栏添加class类名为“fixed”，以便设置固定定位 nav.setAttribute(class,fixed);代码实现9.2 实现页面滚动9.2.4 案例-滚动页面导航栏固定JS代码 例9.2 /由于导航栏设置固定定位不占位置，会影响后面主体部分的布局，/因此需要将主体部分的上外边距设置为导航栏的高度 main.style.marginTop=nav.offsetHeight+px;/若小于导航栏到顶部的距离，则恢复原来的样式 else /通过removeAttribute()方法移除导航栏新添加的class类名 nav.removeAttribute(class);/导航栏取消固定定

29、位之后，主体部分需要恢复原状，将外边距设置为0 main.style.margin=0 auto;/加入scroll滚动动画封装代码 参考9.2.2节的滚动动画封装代码。9.2 实现页面滚动9.2.4 案例-滚动页面导航栏固定代码实现在上述JS代码中，首先通过DOM操作获取导航栏和主体元素，以及获取导航栏顶部的距离，即头部的高度。接着为window添加滚动事件，调用scroll滚动方法获取被卷去的头部距离，并判断被卷去的距离。若被卷去的头部距离大于导航栏到顶部的距离，则为导航栏添加class类名为“fixed”，以便在CSS样式中设置固定定位。由于导航栏设置固定定位不占位置，会影响到后面主体部

30、分的布局，因此需要将主体部分的上外边距设置为导航栏的高度。若被卷去的头部距离小于导航栏到顶部的距离，则恢复原来的样式，通过removeAttribute()方法移除导航栏新添加的class类名，导航栏取消固定定位之后，主体部分需要恢复原状，将外边距设置为0。本节小结本节内容主要讲解了scroll家族的相关属性，scroll滚动方法的封装，以及纵向滚动的缓动动画封装。通过本节的学习，希望读者可以了解scroll滚动方法的封装以及使用，在网页上实现效果多样的滚动方式。9.3使用event对象client家族案例放大镜效果event事件对象9.3 使用event对象clientl家族可用于获取可视区

31、域的宽度和高度。client家族有clientWidth、clientHeight、clientLeft、clientTop、clientX和clientY这6个属性。9.3.1 client家族属性属性说明明clientWidth获取网页可视区域宽度，宽度包括自身宽度和内边距，即clientWidth=width+paddingclientHeight获取网页可视区域高度，高度包括自身高度和内边距，即clientHeight=height+paddingclientLeft返回的是元素左边框的宽度clientTop返回的是元素上边框的宽度clientX鼠标距离可视区域左侧距离，需要event

32、对象调用clientY鼠标距离可视区域上侧距离，需要event对象调用9.3 使用event对象在触发DOM上的某个事件时，会产生一个event事件对象，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同，例如进行鼠标操作的时候，会添加鼠标位置的相关信息到事件对象中。总而言之event是一个事件中的内置对象，其内部装了很多关于鼠标和事件本身的信息，如键盘按键的状态、鼠标的位置、鼠标按钮的状态等。9.3.2 event事件对象概述9.3 使用event对象event事件对象具有兼容性问题。W3C标准规定，事件是作为函数的参数传入的。谷歌火狐等遵循W3C规范的浏

33、览器支持event事件对象作为函数参数传入，但IE6/7/8版本的浏览器采用了一种非标准的方式，将事件作为window对象的event属性，可以使用event或window.event来进行访问，如window.event、window.event.clientX等。event对象的兼容写法如下示例代码所示。9.3.2 event事件对象兼容性问题box.onclick=function(event)var event=event|window.event;console.log(event);9.3 使用event对象event对象的属性说明如表所示。9.3.2 event事件对象event

34、对象属性属性属性说明明event.timeStamp返回事件生成的时间，即距离上一次刷新页面，到本次事件触发的间隔时间event.type当前事件类型event.target该事件被传送到的对象，即指当前事件具体在哪一个元素上触发event.button返回当事件被触发时，哪个鼠标按钮被点击event.pageX鼠标相对于整个文档（网页页面）的左侧部分的距离event.pageY鼠标相对于整个文档（网页页面）的顶部部分的距离9.3 使用event对象续表。9.3.2 event事件对象event对象属性属性属性说明明event.screenX鼠标相对于屏幕左侧的距离event.screenY鼠

35、标相对于屏幕顶部的距离event.clientX鼠标相对于可视区域（浏览器页面）的左侧的距离event.clientY鼠标相对于可视区域（浏览器页面）的顶部的距离9.3 使用event对象pageX和pageY获取鼠标相对于整个文档（网页页面）的距离，当出现滚动条时，隐藏的部分会被计算入pageX和pageY，计算公式为“鼠标在页面的位置=鼠标到可视区域的距离（看得见）+被滚动条卷去的距离（看不见）”。pageX和pageY的封装代码如下所示。9.3.2 event事件对象pageX和pageY的封装/获取鼠标到整个文档的距离，page属性兼容性封装function getpageXY(eve

36、nt)return x:scroll().left+event.clientX,y:scroll().top+event.clientY 9.3 使用event对象9.3.3 案例-放大镜效果本实例是图书商店中的放大镜效果页面。该页面主要由块元素和图像标签构成，图书放大镜效果的页面结构简图如图所示。代码实现9.3 使用event对象9.3.3 案例-放大镜效果主体代码 例9.39.3 使用event对象9.3.3 案例-放大镜效果代码实现在上述主体代码中，首先添加一个子元素块“#book”，作为图书展示区域，在此区域内分别添加一个图书图像块“#pic”和右侧放大的图书区域“#big_pic”，

37、并在图书图像块“#pic”内添加了一个具有移动面罩效果的透明元素块，而图像标签用于嵌入图书图片。/*设置商品页面*/#shop width:750px;height:375px;background-image:url(./image/bj.png);/*添加背景图片*/background-size:cover;/*设置背景图片尺寸*/margin:10px auto;/*设置外边距*/border:1px solid#dd2727;/*添加边框样式*/*设置图书展示区域*/#book width:210px;height:210px;margin:14px 10px 0;/*设置外边距，上

38、 左右 下*/position:relative;/*添加相对定位*/border:1px solid#ccc;/*设置图书图像块*/#pic width:210px;height:210px;代码实现9.3 使用event对象9.3.3 案例-放大镜效果CSS部分代码 例9.3/*设置移动的被放大的图书区域（小蓝色透明块）*/#Movemask width:105px;height:105px;background-color:rgba(149,192,225,0.4);/*设置透明颜色*/position:absolute;/*添加绝对定位*/left:0;/*设置偏移位置*/top:0;

39、cursor:move;/*鼠标变为移动状态*/display:none;/*隐藏元素*/*设置右侧放大的图书图像块*/#big_pic width:280px;height:280px;border:1px solid#aaa;overflow:hidden;/*清除异常的显示效果*/position:absolute;/*设置绝对定位*/left:250px;/*设置偏移位置*/top:0;display:none;/*隐藏元素*/9.3 使用event对象9.3.3 案例-放大镜效果代码实现在上述CSS代码中，首先设置商品页面，为该页面添加背景图片，并设置背景尺寸，以及添加边框样式。再设

40、置图书展示区域，添加相对定位，使用CSS属性设置样式。然后设置移动的被放大的图书区域，使用rgba()函数设置元素蓝色透明，添加绝对定位设置具体的偏移位置，以及使用display属性隐藏该元素。最后设置右侧放大的图书图像块，使用overflow属性用来清除异常的显示效果，再次添加绝对定位设置具体的偏移位置，以及使用display属性隐藏该元素。/1.获取元素:book mask bigPic bImg sImg;var book=document.getElementById(book);var mask=document.getElementById(Movemask);var bigPic

41、=document.getElementById(big_pic);var bImg=document.getElementById(b_img);var sImg=document.getElementById(s_img);/2.鼠标移入移出book,显示mask和bigPic块 /为图书展示区域添加鼠标移入事件 book.onmouseenter=function()/Movemask移动面罩块显示 mask.style.display=block;/big_pic右侧放大区域显示 bigPic.style.display=block;/为图书展示区域添加鼠标移出事件 book.onmo

42、useleave=function()/元素块再次被隐藏 mask.style.display=none;bigPic.style.display=none;代码实现9.3 使用event对象9.3.3 案例-放大镜效果JS代码 例9.3/3.为图书展示区域添加鼠标移动事件 book.onmousemove=function(event)event=event|window.event;/4.获取鼠标距离图书展示区域的左侧和顶部位置 var movex=getpageXY(event).x-book.offsetLeft;var movey=getpageXY(event).y-book.of

43、fsetTop;var x=movex-mask.offsetWidth/2;var y=movey-mask.offsetHeight/2;/6.针对最大值最小值判断 if(x=0)x=0;if(y=(book.offsetWidth-mask.offsetWidth)/大于最大值 等于最大值 /因为offsetWidth包含两个边框的宽度 所以要减去边框 高度同理 x=book.offsetWidth-mask.offsetWidth-2;if(y=(book.offsetHeight-mask.offsetHeight)y=book.offsetHeight-mask.offsetHei

44、ght-2;/5.mask按照鼠标在盒子中的位置进行位移 并减去宽高一半 mask.style.left=x+px;mask.style.top=y+px;/小图片的宽高/大图片的宽高=遮罩层走的距离/大盒子在大图片里面走的距离 /大盒子走的距离=遮罩层走的距离/(小图片的宽高/大图片的宽高)var bili=sImg.offsetWidth/bImg.offsetWidth;/7.按公式求出比例 var bigx=x/bili;var bigy=y/bili;/8.按比例移动大图片 bImg.style.marginLeft=-bigx+px;bImg.style.marginTop=-bi

45、gy+px;代码实现9.3 使用event对象9.3.3 案例-放大镜效果JS代码 例9.3 /获取鼠标到整个文档的距离，page属性兼容性封装 function getpageXY(event)return x:scroll().left+event.clientX,y:scroll().top+event.clientY /加入scroll滚动动画封装代码 参考9.2.2节的滚动动画封装代码9.3 使用event对象9.3.3 案例-放大镜效果代码实现在上述JS代码中，首先获取各个元素，为图书展示区域分别添加鼠标移入和移出事件，当鼠标移入时，“小蓝色透明块”和右侧放大区域显示，当鼠标移出时

46、，这2个元素块再次被隐藏。再为图书展示区域添加鼠标移动事件，定义“小蓝色透明块”的偏移距离，以及按比例移动右侧的放大区域。然后添加page属性的兼容性封装代码和scroll滚动方法的封装代码，实现当鼠标移入图书展示区域时，显示放大镜效果。本节小结本节内容主要讲解了client家族的相关属性，event事件对象的兼容性问题和event事件对象的相关属性，以及pageX和pageY的封装代码。通过本节的学习，希望读者可以掌握client家族和event事件对象的使用方法，获取页面的相关信息。课后小结本章重点讲述如何通过JavaScript的3大家族配合运动效果实现动态特效，主要介绍了offset家族、scroll家族和client家族的属性，匀速动画和缓动动画的封装，滚动方法的封装，event事件对象的兼容问题。希望通过本章内容的分析和讲解，读者能够了解JavaScript3大家族的相关属性，掌握运动动画和滚动方法的封装，在网页上能够实现出一些JavaScript特性。