PC端网页特效：元素偏移量offset系列、元素可视区client系列、元素滚动scroll系列、动画函数封装、常见网页特效案例

1、元素偏移量offset概述及常用属性

offset和style的区别

offset案例：获取鼠标在盒子内的坐标

能拖动的登录框案例

放大镜案例（未完成）

2、元素可视区client （大小不包含边框，offset包含）

3、元素滚动scroll 

window.pageYOffset——页面头部被卷去的数值（scroll是元素被卷去）

淘宝侧边栏案例

offset、client、scroll总结

offset返回元素大小包含边框，其余两个不包含；client和scroll的区别是：client只返回内容可视区，scroll返回实际大小，包含所有内容（因为有可能内容太多，需要卷轴拖动，scroll包含了全部内容）

4、动画函数封装

4.2 动画函数简单封装

设置两个参数，动画目标对象和移动距离，方便其他盒子调用这个动画函数

4.3优化  给不同对象设置不同定时器

避免每次调用都声明一个变量存放定时器而占内存，把变量改为对象的属性

优化  轮播图，点击后才能触发移动，如果不断点击按钮动的会越来越快，因为开启了很多个定时器，所以先清除定时器，再执行定时器，这样不管点多少次，都会先清除再执行，就永远只有一个定时器

4.4 缓动动画

4.5 缓动优化（前进倒退）

（目标值-现在的位置）/ 10，涉及到除法，容易出现小数，导致走不到终点位置，应该取整数，正着走往大取，往回走取小。做两个按钮可以实现前进倒退效果

4.6 动画函数添加回调函数

函数可以作为一个实参传输到另一个函数中，当那个函数执行完后再执行传输过去的函数，也就做回调函数

4.7 动画函数封装到JS文件里

引用动画函数实现缩放案例

轮播图案例！

5、常见网页特效案例

返回顶部案例