1.offset系列
相关属性：
- offsetWidth //可视区域区域的
- offsetHeith //可视区域的高
- offsetTop //从border开始计算
- offsetLeft //从border开始计算
- offsetParent//距离自身最近的带有定位的父级
//如果父级没定位 继续往上找 找到body为止
详解：
offsetParent爸爸去哪
返回该对象距离最近的带有定位的父级
如果当前元素的所有父级元素都没有定位（position为absolute或relative），
offsetParent为body如果当前元素的父级元素中有定位（position为absolute或relative），
offsetParent取最近的那个父级元素另外注意offsetParent与parentNode的区别parentNode只找自己的上一级（亲爹）
offsetHeight与offsetWidth的构成：
offsetHeight = height+padding+border
注意： 包括 自身高度 内边距 边框 不包括 外边距
offsetWidth = Width+padding+border
注意： 包括 自身高度 内边距 边框 不包括 外边距
offsetWidth和style.width的区别：
demo.style.height只能获取行内样式，如果样式写到了其他地方，
甚至根本就没写，便无法获取style.height是字符串（而且带单位），offsetHeight是数值
demo.style.height可以设置行内样式，offsetHeight是只读属性
offsetLeft和style.left的区别
一、style.left只能获取行内样式
二、offsetLeft只读，style.left可读可写
三、offsetLeft是数值，style.left是字符串并且有单位px
四、如果没有加定位，style.left获取的数值可能是无效的
五、最大区别在于offsetLeft以border左上角为基准，style.left以margin左上角为基准
注意：在编写 匀速运动时，要注意margin带来的负面影响。
2.Math()对象
Math对象常用方法:
天花板 向上取整 负数取更大的
- Math.ceil(x)
地板 向下取整 负数取更小的
- Math.floor(x)
//四舍五入
3.Math.round(x)
取绝对值
4.Math.abs(x)
注意：
Math.round(-1.5) 等于-1
Math.round(1.5) 等于-2
3.动画原理
1. 动画原理公式
动画原理公式： leader = leader + step
解释：
leader表示盒子当前位置
step表示步长(相当于速度)
box.style.left = box.offsetLeft + 10 + "px";
让setInterval不断执行某个函数修改盒子的位置属性最后就实现了动画的效果
2.动画函数封装源码：
function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//leader = leader + step
var leader = obj.offsetLeft;
//target-leader
var step = 10;
var step = (target - leader) > 0 ? step : -step;
//
if (Math.abs(target - leader) > Math.abs(step)) {
leader = leader + step;
obj.style.left = leader + "px";
} else {
obj.style.left = target + "px";
clearInterval(obj.timer);
}
}, 15)
}