摘要：進行一些判斷，將目標位置設置在在，不變，也就是將其向右水平移動。另外，完整源代碼中沒用這個抽象函數。

前言：其實js動畫跟CSS－DOM結合的挺緊密的，都是用js函數實現一段時間內重復設置元素的樣式就形成了動畫，其中涉及到大量的用DOM獲取元素樣式操作，所以可以先看一下CSS－DOM那篇文章，這次總結一下js中的動畫，這一篇是基礎知識總結，只用到了setTimeout函數，還有兩個定時器函數下篇文章總結，最后要實現一個純js輪播圖Demo，好的，黑喂狗

－－－－－－－－－－－－－－－－－－ 你瞅啥? －－－－－－－－－－－－－－－－－－－－－－－－－

首先想讓一個元素移動要先設置一個元素，假設我們現在有一標簽：

Hello World!!!

        function positionMessage(){
        //檢測與判斷
        if(!document.getElementById){
            return false;
        }
        if(!document.getElementById("message")){
            return false;
        }
        //獲取元素的標簽
        var elem = document.getElementById("message");
        //設置元素的位置
        elem.style.position = "absolute";
        elem.style.left = "50px";
        elem.style.top = "100px";
    }

接下來我們介紹一個延遲執行函數，setTimeout(),它接受兩個參數，第一個參數時字符串，內容是將要執行的那個函數名字；第二個參數是一個數值，以毫秒為單位設定需要經過多長時間后才開始執行第一個參數里面的函數。所以有個這個函數，我們可以寫一個不斷改變位置的函數moveMessage(),然后把它傳遞給setTimeout()函數。如下代碼：

    function moveMessage(){
        if(!document.getElementById){
            return false;
        }
        if(!document.getElementById("message")){
            return false;
        }
        var elem = document.getElementById("message");
        var xpos = parseInt(elem.style.left);
        var ypos = parseInt(elem.style.top);
        if(xpos ==200&&ypos == 100){
            return true;
        }
        if(xpos  < 200){
            xpos++;
        }
        if(xpos > 200){
            xpos--;
        }
        if(ypos < 100){
            ypos++;
        }
        if(ypos > 100){
            ypos--;
        }
        elem.style.left = xpos + "px";
        elem.style.top = ypos + "px";
        movement = setTimeout("moveMessage()",10);
    }

1.首先獲取原始的left和position值，由于涉及到很多計算，所以將字符串轉換為數。
2.進行一些判斷，將目標位置設置在left在200px，top不變，也就是將其向右水平移動。然后進行邏輯判斷：如果到達目標位置，就返回true，函數執行完畢。
3.如果沒有到達位置，則不斷將數值加1，如果超過設定位置則減1.
4.最后在moveMessage()函數內部設置setTimeout()函數，即在moveMessage()函數一次執行結束后，就每隔10毫秒再次調用這個函數，即在剛開始每隔10毫秒向右移動1px，直到到達設定地點函數return true結束整個函數。

最后要在頁面加載完成后調用這個函數，所以要用到老朋友addLoadEvent()函數，如下代碼：

    function　addLoadEvent(func){
        var oldonload = window.onload;
        if(typeof window.onoad != "function"){
            window.onload = func;
        }else{
            window.onload = function(){
                oldonload();
                func(); 
            }
        }
    }

最后在頁面加載完成時執行moveMessage()函數：

    addLoadEvent(PositionMessage);

剛才創建的moveMessage()函數中有很多信息都是硬編碼在函數中，這個函數的靈活性和適用范圍就小，所以將一些具體的東西抽象出來，則這個函數就更加便于復用。
現在我們創建一個moveElement()函數,看下面代碼：

       //首先為這個函數傳進幾個參數
        //@elementID:打算移動的元素的ID
        //@final_x:該元素目的地距左邊的位置
        //@final_y:該元素目的地距上邊的位置
        //@interval:該元素兩次移動之間的停頓時間
        function moveElement(elementID,final_x,final_y,interval){
            //進行檢測和判斷
            if(!document.getElementById){
                return false;
            }
            if(!document.getElementById(elementID)){
                return false;
            }
            var elem = document.getElementById(elementID);  //參數沒有引號
            var xpos =parseInt(elem.style.left);
            var ypos = parseInt(elem.style.top);
            if(xpos == final_x && ypos == final_y){
                return true;
            } 
            if(xpos  < final_x){
                xpos++;
            }
            if(xpos > final_x){
                xpos--;
            }
            if(ypos < final_y){
                ypos++;
            }
            if(ypos > final_y){
                ypos--;
            }
            elem.style.left = xpos + "px";
            elem.style.top = ypos + "px";
            //由于這次moveElement()函數是帶參數的，所以再次調用這個函數要寫成下面一行。
            //movement = setTimeout("moveElement(""+elementID+"","+final_x+","+final_y+","+interval+")",10);
            //但是這么寫不簡潔，所以可以復制給一個變量
            var repeat = "moveElement(""+elementID+"","+final_x+","+final_y+","+interval+")";
            movement = setTimeout(repeat,interval);
        }

直到現在我終于明白為什么要做一次判斷減減了，因為抽象之后，可能傳入的參數會讓元素向相反的方向移動，這樣就寫可以讓函數無論向哪個方向移動都可以了。

抽象之后，可以在positionMessage的最后直接調用moveElement函數，如下代碼：

        function positionMessage(){
        //檢測與判斷
        if(!document.getElementById){
            return false;
        }
        if(!document.getElementById("message")){
            return false;
        }
        //獲取元素的標簽
        var elem = document.getElementById("message");
        //設置元素的位置
        elem.style.position = "absolute";
        elem.style.left = "50px";
        elem.style.top = "100px";
        
        //調用移動函數,可以隨意改變值，以實現不用的動畫效果
        moveElement("message",200,100,10);
    }

//函數animation傳入四個參數，
//@ele:要進行動畫的DOM對象
//@attr:要改變的屬性
//@ from ， to 屬性值從哪個值到哪個值

var animation = function(ele, attr, from, to){
    var distance = Math.abs(to - from);
    var stepLength = distance/100;
    var sign = (to - from)/distance;  //代表方向
    var offset = 0;
    //step函數是每觸發的時候改變一下屬性值
    var step = function(){
        var temOffset = offset + stepLength;
        if(temOffset < distance){
            ele.style[attr] = from + temOffset*sign + "px";
            offset = temOffset;
        }else{
            ele.style[attr] = to + "px";
            clearInterval(intervalID);
        }
    }
    ele.style[attr] = from + "px";
    
    //先調用定時器，每10毫秒觸發一次step函數
    var intervalID = setTimeout(step,10);
}

以上是網易前端微專業老師給出的抽象代碼，還介紹了另外兩個函數，將在下一篇中介紹。
另外，完整源代碼中沒用這個抽象函數。

    
    




    
Hello World!!!