moveElement函数与positionMessage函数

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";
    var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    movement=setTimeout(repeat,interval);
    
}
 
 addLoadEvent(moveMessage);

moveElement函数，用于使带有id元素属性的文档移动，只要给出元素id，最终x坐标，最终y坐标，时间间隔。就可以调用此函数。

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);
    }
addLoadEvent(positionMessage);

positionMessage函数，设置带有id元素属性文档位置函数，搭配moveElement函数可以达到动画效果。

function moveElement(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);
    }
    var xpos=parseInt(elem.style.left);
    var ypos=parseInt(elem.style.top);
    var dist=0;
    if (xpos==final_x&&ypos==final_y) {
    return true;
}
    if (xpos<final_x) {
        dist=Math.ceil((final_x-xpos)/10);
        xpos=xpos+dist;
    }
    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);
        ypos=ypos+dist;
    }
    if (ypos>final_y) {
        dist=Math.ceil((ypos-final_y)/10);
        ypos=ypos-dist;
    }
    elem.style.left=xpos+"px";
    elem.style.top=ypos+"px";
    var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    elem.movement=setTimeout(repeat,interval);
    
}
 
 addLoadEvent(moveMessage);

这是改进版，移动速度随着初始与目标距离的增加逐渐加快。