PC端网页特效
offset概述
offset 就是偏移量，我们使用offset 系列相关属性可以动态得到该元素的位置（偏移）、大小等
-获得元素距离带有定位父元素的位置
-获得元素自身的大小
注意：返回的数值都不带单位
offset 系列常用的属性：
| offset系列属性 | 作用 |
| element.offsetParent | 返回作为该元素带有定位的父级元素 如果父级元素都没有定位则返回body |
| element.offsetTop | 返回元素相对带有定位父元素上方的偏移 |
| element.offsetLeft | 返回元素相对带有定位父元素左边的偏移 |
| element.offsetWidth | 返回自身包括padding、边框、内容区的宽度，返回数值不带单位 |
| element.offsetHeight | 返回自身包括padding、边框、内容区的高度，返回数值不带单位 |
offset 与 style 区别
| offset | style |
| offset 可以得到任意样式表中的样式 offset 系列获得的数值是没有单位的 offsetWidth 包含padding + border + width offsetWidth 等属性是只读属性，只能获取不能赋值 |
style 只能得到行内样式表中的样式值 style.width 获得的是带有单位的字符串 style.width 获得不包含padding 和 border的值 style.width 是可读写属性，可以获取也可以赋值 |
| offset 更适合用来获取元素大小位置 | style 用来给元素更改值 |
元素可视区client 系列
client 就是客户端，使用client 系列相关的属性来获取元素可视区的相关信息，通过client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
| client系列属性 | 作用 |
| element.clientTop | 返回元素上边框的大小 |
| element.clientLeft | 返回元素左边框的大小 |
| element.clientWidth | 返货自身包括padding、内容区的宽度、不包含边框，返回数值不带单位 |
| element.clientHeight | 返货自身包括padding、内容区的宽度、不包含边框，返回数值不带单位 |
立即执行函数
(function() {} )()
或者
(function(){}());立即执行函数最大的作用就是 独立创建了一个作用域
里面所有的变量都是局部变量，不会有命名冲突的情况
元素滚动 scroll 系列
scroll 就是滚动等，我们使用scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
得到的是内容实际的大小
| scroll系列属性 | 作用 |
| element.scrollTop | 返回被卷去的上侧距离，返回数值不带单位 |
| element.scrollLeft | 返回被卷去的左侧距离，返回数值不带单位 |
| element.scrollWidth | 返回自身实际的宽度，不含边框，返回数值不带单位 |
| element.scrollHeight | 返回自身实际的高度，不含边框，返回数值不带单位 |
需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：
1：声明了DTD，使用document.documentElement。scrollTop
2：未声明DTD，使用document.body.scrollTop
3：新方法 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| 三大系列大小对比 | 作用 |
| element.offsetWidth | 返回自身包括padding、边框、内容区的宽度、返回数值不带单位 |
| element.clientWidth | 返回自身包括padding、内容区的宽度、不含边框，返货数值不带单位 |
| element.scrollWidth | 返回自身实际的宽度、不含边框，返货数值不带单位 |
主要用法：
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 同样不会冒泡
动画函数分装
核心原理：通过定时器 setInterval()
实现步骤：
1、获得盒子当前位置
2、让盒子在当前位置加上1个移动距离
3、利用定时器不断重复这个操作
4、加一个结束定时器的条件
5、注意此元素需要添加定位，才能使用 element.style.left
动画函数简单分装函数
注意函数需要传递2个参数，动画对象 和 移动距离
简单动画函数封装 obj目标对象 target 目标位置
function animate(obj,target){}动画函数给不同元素记录不同定时器
如果多个函数都是用这个动画函数，每次都要 var 声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。
核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。
function animate(obj,target){
obj.timer = setInterval(function(){
if(obj.offsetLeft >= target){
//停止动画本质是停止定时器
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 5 +'px';
},30);
}
var div = document.querySelector('div');
var span = document.querySelector('span');
//调用函数
animate(div,300);
animate(span,300);缓动动画原理
缓动动画就是让元素运动速度有所变化，最常见的就是让速度慢慢停下来
思路：
1、让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2、 核心算法：（目标值 - 现在的值） / 10 作为每次移动的距离 步长
3、停止条件是：让当前盒子位置等于目标位置就停止定时器
匀速动画：盒子当前的位置 + 固定的值 10
缓动动画：盒子当前的位置 + 变化的值 （目标值 - 现在的值） / 10
4、注意步长值需要取整
动画函数多个目标之间移动
可以让动画函数从800 移动到500
当我们点击按钮的时候，判断步长是正值还是负值
1、如果是正值，则步长往大的取整
2、如果是负值，则步长往小了取整
step > 0 ? Math.ceil(step) : Math.floor(step)动画函数添加回调函数
回调函数原理：函数可以作为一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行穿进去的这个函数，过程就叫做回调。
回调函数写的位置：定时器结束的位置。
动画函数分装到单独JS 文件里面
因为以后经常使用这个动画函数，可以单独封装到一个 JS 文件里面，使用的时候引用这个 JS 文件即可
网页轮播图
轮播图也称为焦点图，是网页中比较常见的网页特效
功能需求：
1、鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
2、点击右侧按钮一次，图片往左播放一张，以此类推，左右按钮同理。
3、图片在播放的同时，下面的小圆圈模块跟随一起变化
4、点击小圆圈，可以播放相应图片
5、鼠标不经过轮播图，轮播图也会自动播放图片
6、鼠标经过，轮播图模块，自动播放停止。