一、元素偏移量offset系列
概述： offset系列相关属性可以动态得到该元素的位置（偏移）、大小等。
offset系列常用属性
（1）element.offsetParent：返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body。
（2）element.offsetTop：返回元素相对于带有定位的父元素上方的偏移。
（3）element.offsetLeft：返回元素相对于带有定位的父元素左边框的偏移。
（4）element.offsetWidth：返回元素自身包括padding、边框、内容区的宽度，返回数值不带单位。
（5）element.offsetHeight：返回元素自身包括padding、边框、内容区的高度，返回数值不带单位。
offset和style的区别
| offset | style |
|---|---|
| offset可以获得任意样式表中的样式值 | style只能得到行内样式表中的样式值 |
| offset系列获得的数值没有单位 | style.width获得的是带有单位的字符串 |
| offsetWidth包括padding+border+width | style.width获得的值不包含padding和border |
| offsetWidth等属性是只读属性，只能获取不能赋值 | style.width是可读属性，可以获取也可以赋值 |
| 要想获取元素大小位置，使用offset更合适 | 要想给元素更改值，使用style改变 |
二、元素可视区client系列
概述： client系列的相关属性可以用来获取元素可视区的相关信息。通过client系列的相关属性可以动态获得该元素的边框大小、元素大小等。
client系列常用属性
（1）element.clientTop：返回元素上边框的大小
（2）element.clientLeft：返回元素左边框的大小
（3）element.clientWidth：返回元素自身包括padding、内容区的宽度，不含边框，返回数值不带单位
（4）element.clientHeight：返回元素自身包括padding、内容区的高度，不含边框，返回数值不带单位
三、元素滚动scroll系列
概述： 动态获得该元素的大小，滚动距离等。
scroll系列常用属性
（1）element.scrollTop：返回被卷去的上侧距离，返回数值不带单位
（2）element.scrollLeft：返回被卷去的左侧距离
（3）element.scrollWidth：返回自身实际的宽度，不含边框
（4）element.scrollHeight：返回自身的实际高度，不含边框
四、动画效果
原理： 通过定时器setInterval()不断移动盒子位置。
缓动动画原理： 让元素运动速度有所变化，最常见的是让速度慢慢停下来
动画函数封装
//obj:对象；target:终点；callback：回调函数
function animate(obj, target, callback){
//先清除以前的定时器，只保留当前的一个定时器执行
claerInterval(obj.timer);
obj.timer = setInterval(function(){
//步长
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(obj.offsetLeft == target){
//停止动画
clearInterval(obj.timer);
//回调函数调用？
if(callback){
callback();
}
}
//移动
obj.style.left = obj.offsetLeft + step + 'px';
},15)
}
