JS笔记（五）

十七、PC端网页特效

17.1 元素偏移量offset系列

17.1.1 概述

使用offset系列相关属性可以动态获得该元素的位置（偏移）、大小等

offsetTop和offsetLeft都以带定位的父元素距离为准，若没有带定位的父元素则以body为准

offsetParent与parentNode区别

17.1.2offset与style区别

拖拽窗口效果原理

17.2 元素可视区client系列

17.2.1 client系列属性

17.2.2 立即执行函数

不需要调用，立马能够自己执行，有两种写法

(function(){})();

最后一个小括号是调用函数的括号，两种写法分别写在里外，里面的小括号和普通函数一样可以写上实参和形参。
立即执行函数最大的作用就是独立创建了一个作用域，里面所有的变量都是局部变量。

(function(){}());

17.3元素滚动scroll系列

scroll包含padding不包含margin，scroll当内容超过盒子高度，scrollHeight显示的是实际内容的宽度如下图所示

当要获取页面被卷去上沿高度时用window.pageYOffset
这在设计淘宝固定侧边栏时有应用

三大系列总结

offset包含border边框其他两个不包括
scroll包含内容超出部分

mouseenter和mouseover的区别（重点）

• mouseover经过目标盒子会触发，经过目标盒子的子盒子也会触发
• mouseenter经过目标盒子会触发，经过目标盒子的子盒子不会触发事件，之所以会这样是因为mouseenter不会冒泡。
• 跟mouseenter搭配，mouseleave鼠标离开，同样不会冒泡

17.4 动画函数封装

17.4.1 动画实现原理

核心原理：利用定时器setInterval()不断移动盒子位置

案例

17.4.2 动画函数简单封装

函数需要传递两个参数，动画对象和移动到的距离

17.4.3动画函数给不同元素记录不同定时器

如果有多个元素需要用这个函数，这样可以给不同元素指定不同计时器

十八、缓动动画

18.1 缓动动画原理

就是让元素速度有所变化，常见的是慢慢停下来
主要思路

18.2 动画函数添加回调函数

将function函数作为一个形参传入动画函数中，达到的效果是当盒子移到终点时执行函数里面的样式，回调函数写在定时器结束的位置后，if判断如果有回调函数传进来就调用执行函数

18.3 动画函数的使用

可将动画函数封装到一个js文件中，然后引入js文件如下图

轮播图和节流阀317-328

案例
返回顶部，window（x，y）是可以让页面滚动到任意地方，顶部就为（0,0）

望点赞谢谢各位！！