JS DOM编程艺术——用JS实现动画效果—— JS学习笔记2015-7-21(第88天)

moveElement函数
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用定时器实现JS动画效果</title>

<style>

</style>

</head>

<body>

<p id="message">where</p>
<p id="message2">whoa!</p>

<script>
     

    function positionMessage(){

        var elem = document.getElementById("message");
        elem.style.position = "absolute";
        elem.style.left = "50px";
        elem.style.top = "100px";
        moveElement("message",125,25,20);

        var elem = document.getElementById("message2");
        elem.style.position = "absolute";
        elem.style.left = "50px";
        elem.style.top = "50px";
        moveElement("message2",125,125,10);
        //movement = setTimeout("moveMessage()", 5000);
    }

    function moveElement(elementID,final_x,final_y,interval){

       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);
   }
    // function moveMessage(){
    //     var elem = document.getElementById("message");
    //     elem.style.left = "200px";
    // }
    positionMessage();
    // moveMessage();

</script>
</body>
</html>
View Code