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)
}