一、元素偏移量 offset 系列
1、offset 概述
offset翻译过来就是偏移量，我们使用offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等
获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意： 返回的数值都不带单位
2、offset 与 style 区别
拖动的模态框案例
仿京东放大镜效果
二、元素可视区 client 系列
client 翻译过来就是 客户端，我们使用client 系列的相关属性来获取元素可视区的相关信息。通过client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
2、立即执行函数
不需要调用，立即能够自己执行的函数
主要作用：创建了一个独立的作用域。避免了命名冲突问题
写法：（function（） { }（） 或者（function（）{ }（））；
淘宝flexible.JS源码分析之核心原理
三、元素滚动 scroll 系列
scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等
2、页面被卷去的头部
如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件
仿淘宝固定侧边栏案例
3、页面被卷去的头部兼容性解决方案
三大系列总结
主要用法：
1、offset 系列经常用于获得元素位置 offsetLeft offsetTop
2、client 经常用于获取元素大小 clientWidth clientHeight
3、scroll经常用于获取滚动距离 scrollTop scrollLeft
4、注意页面滚动的距离通过 window.pageXOffset 获得
mouseenter 和 mouseover 的区别
mouseenter 鼠标事件
当鼠标移动到元素上时就会触发 mouseenter 事件
类似 mouseover，它们两者之间的差别是
mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发
之所以这样，是因为mouseenter 不会冒泡
跟 mouseenter 搭配鼠标离开 mouseleave 同样不会冒泡
四、动画函数封装
1、动画实现原理
核心原理：通过定时器 setlnterval（）不断移动盒子位置
实现步骤：
1、获得盒子当前位置
2、让盒子在当前位置加上一个移动距离
3、利用定时器不断重复这个操作
4、加一个结束定时的条件
5、注意此元素需要添加定位，才能使用 element.style.left
2、动画函数简单封装
注意函数需要传递两个参数，动画对象和移动到的距离。
3、动画函数给不同元素记录不同定时器
如果多个元素都使用这个动画函数，每次都要 var 声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）
核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性
4、缓动效果原理
缓动就是让元素运动速度有变化，最常见的是让速度慢慢停下来
思路：
1、让盒子每次移动距离慢慢变小，速度就会慢慢落下来
2、核心算法：（目标值- 现在的位置）/ 10 作为，每次移动的距离 步长
3、停止条件：让当前盒子位置等于目标位置就停止定时器
4、注意步长值需要取整
var step = (target - obj.offsetLeft) / 10;
step = step >0 ? Math.ceil(step) : Math.floor(step);
匀速动画是当前的位置 + 固定的值
缓动动画是 当前位置 + 变化的值（步长公式）
6、动画函数添加回调函数
回调函数原理： 函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，在执行传进去的这个函数，这个过程叫回调
回调函数写的位置：定时器结束的位置。
7、动画函数封装到单独JS文件里面
1、单独建一个JS文件，使用时引用这个文件
五、常见网页特效案例
网页轮播图
鼠标经过显示隐藏左右按钮
动态生成小圆圈
小圆圈排他思想 这句话放在for 循环里面
点击小圆圈滚动图片
此时用到animate 动画函数，将JS文件引入（注意：因为index.js 依赖animate.js 所以animate.js 要写到 index.js 上面）
注意是ul移动而不是小li
滚动图片的核心算法： 点击某个小圆圈，就让图片滚动 小圆圈的索引号乘以图片的宽度作为ul移动距离。
右侧按钮无缝滚动 在for循环外面
克隆第一张图片
放在ul 最后面
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
小圆圈跟随右侧按钮一起变化
当我们点击了某个小li 就要把这个小li 的索引号给num
num = index
把小li的索引号给 circle
circle = index ；
左侧按钮功能制作
自动播放轮播图
clearInterval (timer)；
timer=null；//清除定时器变量
timer = setInterval（function（）{
//手动调用点击事件
arrow-r.click();
},2000）;
5、1 节流阀
防止轮播图按钮连续点击造成播放过快。
节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发
核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。
开始设置一个变量 var flag = true；
if （flag）{flag = false；do something} 关闭水龙头
利用回调函数 动画执行完毕，flag = true 打开水龙头
返回顶部案例
筋斗云案例
