1. 程式人生 > >對js動畫和時間控制的使用

對js動畫和時間控制的使用

// JavaScript Document
//打算移動的元素ID;elementID
//該元素的目的地的"左"位置;final_x;
//該元素的目的地的"上"位置;final_y;
//停頓時間;interval;

function moveMessage(elementID,final_x,final_y,interval){
    if(!document.getElementById) return false;
    if(!document.getElementById(elementID)) return false;
    var elem = document.getElementById(elementID);
    if(elem.movement){
        clearTimeout(elem.movement)//防止多次執行執行moveMessage,導致程式碼堵塞,這樣可以停止一下未完成的程式碼
    }
    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 ){
        dist =Math.ceil((final_x-xpos)/10);
        xpos=dist+xpos;
    }
    if(xpos > final_x){
        dist =Math.ceil((xpos-final_x)/10);
        xpos=xpos-dist;
    }
    if(ypos < final_y){
        dist =Math.ceil((final_y-ypos)/10);
        xpos=dist+ypos;
    }
    if(ypos > final_y){
        dist =Math.ceil((ypos-final_y)/10);
        xpos=ypos-dist;
    }
    elem.style.left = xpos +"px";
    elem.style.top = ypos +"px";
    var repeat = "moveMessage('"+elementID+"',"+final_x+","+final_y+","+interval+")"//'"+elementID+"'這裡的單引號不可以少非數值變數
    elem.movement  = setTimeout(repeat,interval); //這裡的movement必須是全域性變數因為,剛開始clearTimeout(elem.movement)會找不到報錯
}