1. 元素偏移量 offset 系列
1.1 offset 概述
offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小（宽度高度）
- 注意： 返回的数值都不带单位 offset 系列常用属性：
1.2 offset 与 style 区别
2. 元素可视区 client 系列
client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列 的相关属性可以动态的得到该元素的边框大小、元素大小等。
知识点立即执行函数 (function() {})() 或者 (function(){}()) 作用： 创建一个独立的作用域。 避免了命名冲突问
3. 元素滚动 scroll 系列
3.1 元素 scroll 系列属性
scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
3.2 页面被卷去的头部
如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏 掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。
3.3 页面被卷去的头部兼容性解决方案
需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：
- 声明了 DTD，使用 document.documentElement.scrollTop
- 未声明 DTD，使用 document.body.scrollTop
- 新方法 window.pageYOffset 和 window.pageXOffset，IE9 开始支持
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
使用的时候 getScroll().left
3.4 三大系列总结
他们主要用法：
- offset系列 经常用于获得元素位置 offsetLeft offsetTop
- client 经常用于获取元素大小 clientWidth clientHeight
- scroll 经常用于获取滚动距离 scrollTop scrollLeft
- 注意页面滚动的距离通过 window.pageXOffset 获得
3.5 mouseenter 和mouseover的区别
当鼠标移动到元素上时就会触发 mouseenter 事件，类似 mouseover，它们两者之间的差别是
- mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。
- mouseenter 只会经过自身盒子触发 之所以这样，就是因为mouseenter不会冒泡，跟mouseenter搭配，鼠标离开 mouseleave 同样不会冒泡
4. 动画函数封装
4.1 动画实现原理
核心原理：通过定时器 setInterval() 不断移动盒子位置。
实现步骤：
- 获得盒子当前位置
- 让盒子在当前位置加上1个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位，才能使用element.style.left
4.2 动画函数简单封装
注意函数需要传递2个参数，动画对象和移动到的距离。
4.3 动画函数给不同元素记录不同定时器
如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。
4.4 缓动效果原理
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来，思路：
- 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
- 核心算法： (目标值 - 现在的位置 ) / 10 做为每次移动的距离步长
- 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
- 注意步长值需要取整
4.5 动画函数多个目标值之间移动
可以让动画函数从 800 移动到 500。 当我们点击按钮时候，判断步长是正值还是负值
- 如果是正值，则步长往大了取整
- 如果是负值，则步长向小了取整
4.6 动画函数添加回调函数
回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后， 再执行传进去的这个函数，这个过程就叫做回调。
回调函数写的位置：定时器结束的位置。
4.7 动画函数封装到单独JS文件里面
因为以后经常使用这个动画函数，可以单独封装到一个JS文件里面，使用的时候引用这个JS文件即可。
- 单独新建一个JS文件。
- HTML文件引入 JS 文件
4.8 节流阀
节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。 核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。
- 开始设置一个变量 var flag = true;
- If(flag) {flag = false; do something} 关闭水龙头
- 利用回调函数 动画执行完毕， flag = true 打开水龙头
