1. 動畫和封裝
1.1 動畫的分類
閃現
p.style.left =”500px” 勻速 緩動
1.2 動畫原理
盒子未來的位置 = 盒子現在的位置 + 步長；
style.left賦值，用offsetLeft獲取值。
style.left獲取值不方便，獲取行內式，如果沒有值“”；容易出現NaN；
offsetLeft獲取值特別方便，而且是現成number方便計算。因為他是隻讀的不能賦值。
1.3 緩動動畫原理
動畫原理 = 盒子位置 + 步長（步長越來越小）
leader=leader+(target-leader)/10;
盒子位置 = 盒子本身位置+（目標位置-盒子本身位置）/ 10；
1.4 動畫封裝實例代碼
var btnArr = document.getElementsByTagName("button");
var box = document.getElementsByClassName("box")[0];
//綁定事件
btnArr[0].onclick = function () {
//如果有一天我們要傳遞另外一個盒子，那麼我們的方法就不好用瞭
//所以我們要增加第二個參數，被移動的盒子本身。
animate(box,200);
}
function animate(ele,target){
//要用定時器，先清除定時器
//一個盒子隻能有一個定時器，這樣兒的話，不會和其他盒子出現定時器沖突
//而定時器本身就成為盒子的一個屬性
clearInterval(ele.timer);
//我們要求盒子既能向前又能向後，那麼我們的步長就得有正有負
//目標值如果大於當前值取正，目標值如果小於當前值取負
var speed = target>ele.offsetLeft?10:-10;
ele.timer = setInterval(function () {
//在執行之前就獲取當前值和目標值之差
var val = target - ele.offsetLeft;
ele.style.left = ele.offsetLeft + speed + "px";
//目標值和當前值之差如果小於步長，那麼就不能在前進瞭
//因為步長有正有負，所有轉換成絕對值來比較
if(Math.abs(val)1.5 緩動動畫封裝實例代碼
var btn = document.getElementsByTagName("button")[0];
var p = document.getElementsByTagName("p")[0];
var timer = null;
btn.onclick = function () {
//要用定時器，先清定時器
clearInterval(timer);
timer = setInterval(function () {
var target = 0;
//緩動。如何緩動呢？步長越來越小....
// 步長用目標位置和盒子自身位置的十分之一
//最後10像素的時候都是1像素1像素的向目標位置移動，就能夠到達指定位置。
var step = (target - p.offsetLeft)/10;
//每次獲取步長都向上取整，這種情況就包含step<0.4的情況
//拓展：差值大於0的時候，向上取整，小於0的時候向下取整。
//step = Math.ceil(step);
step = step>0?Math.ceil(step):Math.floor(step);
//step = target>p.offsetLeft?Math.ceil(step):Math.floor(step);
//動畫原理：盒子未來的位置 = 盒子當前的位置+步長
p.style.left = p.offsetLeft + step + "px";
//跳出條件：目標位置-當前位置的絕對值，小於步長
console.log(1);
if(Math.abs(0-p.offsetLeft)