摘要：進(jìn)行一些判斷，將目標(biāo)位置設(shè)置在在，不變，也就是將其向右水平移動(dòng)。另外，完整源代碼中沒(méi)用這個(gè)抽象函數(shù)。

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

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

首先想讓一個(gè)元素移動(dòng)要先設(shè)置一個(gè)元素，假設(shè)我們現(xiàn)在有一標(biāo)簽：

Hello World!!!

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

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

    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值，由于涉及到很多計(jì)算，所以將字符串轉(zhuǎn)換為數(shù)。
2.進(jìn)行一些判斷，將目標(biāo)位置設(shè)置在left在200px，top不變，也就是將其向右水平移動(dòng)。然后進(jìn)行邏輯判斷：如果到達(dá)目標(biāo)位置，就返回true，函數(shù)執(zhí)行完畢。
3.如果沒(méi)有到達(dá)位置，則不斷將數(shù)值加1，如果超過(guò)設(shè)定位置則減1.
4.最后在moveMessage()函數(shù)內(nèi)部設(shè)置setTimeout()函數(shù)，即在moveMessage()函數(shù)一次執(zhí)行結(jié)束后，就每隔10毫秒再次調(diào)用這個(gè)函數(shù)，即在剛開(kāi)始每隔10毫秒向右移動(dòng)1px，直到到達(dá)設(shè)定地點(diǎn)函數(shù)return true結(jié)束整個(gè)函數(shù)。

最后要在頁(yè)面加載完成后調(diào)用這個(gè)函數(shù)，所以要用到老朋友a(bǔ)ddLoadEvent()函數(shù)，如下代碼：

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

最后在頁(yè)面加載完成時(shí)執(zhí)行moveMessage()函數(shù)：

    addLoadEvent(PositionMessage);

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

       //首先為這個(gè)函數(shù)傳進(jìn)幾個(gè)參數(shù)
        //@elementID:打算移動(dòng)的元素的ID
        //@final_x:該元素目的地距左邊的位置
        //@final_y:該元素目的地距上邊的位置
        //@interval:該元素兩次移動(dòng)之間的停頓時(shí)間
        function moveElement(elementID,final_x,final_y,interval){
            //進(jìn)行檢測(cè)和判斷
            if(!document.getElementById){
                return false;
            }
            if(!document.getElementById(elementID)){
                return false;
            }
            var elem = document.getElementById(elementID);  //參數(shù)沒(méi)有引號(hào)
            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()函數(shù)是帶參數(shù)的，所以再次調(diào)用這個(gè)函數(shù)要寫(xiě)成下面一行。
            //movement = setTimeout("moveElement(""+elementID+"","+final_x+","+final_y+","+interval+")",10);
            //但是這么寫(xiě)不簡(jiǎn)潔，所以可以復(fù)制給一個(gè)變量
            var repeat = "moveElement(""+elementID+"","+final_x+","+final_y+","+interval+")";
            movement = setTimeout(repeat,interval);
        }

直到現(xiàn)在我終于明白為什么要做一次判斷減減了，因?yàn)槌橄笾?，可能傳入的參?shù)會(huì)讓元素向相反的方向移動(dòng)，這樣就寫(xiě)可以讓函數(shù)無(wú)論向哪個(gè)方向移動(dòng)都可以了。

抽象之后，可以在positionMessage的最后直接調(diào)用moveElement函數(shù)，如下代碼：

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

//函數(shù)animation傳入四個(gè)參數(shù)，
//@ele:要進(jìn)行動(dòng)畫(huà)的DOM對(duì)象
//@attr:要改變的屬性
//@ from ， to 屬性值從哪個(gè)值到哪個(gè)值

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函數(shù)是每觸發(fā)的時(shí)候改變一下屬性值
    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";
    
    //先調(diào)用定時(shí)器，每10毫秒觸發(fā)一次step函數(shù)
    var intervalID = setTimeout(step,10);
}

以上是網(wǎng)易前端微專業(yè)老師給出的抽象代碼，還介紹了另外兩個(gè)函數(shù)，將在下一篇中介紹。
另外，完整源代碼中沒(méi)用這個(gè)抽象函數(shù)。

    
    




    
Hello World!!!