JavaScript DOM编程艺术（第2版）第十章用JavaScript实现动态效果

本文介绍了一种使用HTML和JavaScript实现元素动画的方法，通过自定义函数moveElement控制元素移动到指定位置，支持多个元素同时动画，只需设置ID、目标位置和间隔时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从位置距上100距左50的位置开始移动直到到达距上100距左200

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="message">Wheel</p>
<script>
    //移动
    function moveMessage() {
        if (!document.getElementById) return false;
        if (!document.getElementById("message")) return false;
        var elem = document.getElementById("message");
        //表示目的地的“左”“上”位置.。这里需要用parse把字符串里的数值提取出来
        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";
        //从位置距上100距左50的位置开始移动 直到到达距上100距左200
        movement = setTimeout("moveMessage()",10);
    }
    //位置
    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";

        //时间——延时
        movement = setTimeout("moveMessage()",3000);
        clearTimeout(movement);
    }


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

    addLoadEvent(positionMessage);
    addLoadEvent(moveMessage);
</script>
</body>
</html>

在这里插入图片描述

现在增加一个函数：实现抽象函数的作用
moveElement
参数

打算移动的元素id——elementID
该元素的目的地的左位置——final-x
该元素的目的地的上位置——final-y
两次移动之间的停顿时间——interval

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="message">Wheel</p>
<script>
    //位置
    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)
    }

    function moveElement(elementID,final_x,final_y,interval) {
        if (!document.getElementById) return false;
        if (!document.getElementById(elementID)) return false;
        var elem = document.getElementById(elementID);
        //表示目的地的“左”“上”位置.。这里需要用parse把字符串里的数值提取出来
        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 addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload !='function'){
            window.onload = func;
        } else {
            window.onload = function () {
                oldonload();
                func();
            }
        }
    }

    addLoadEvent(positionMessage);
    addLoadEvent(moveElement);
</script>
</body>
</html>

效果是一样的，不再展示

当在html中添加新元素，只需要找到id并修改他移动的位置还有时间就好，很方便！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="message">Wheel</p>
<p id="message2">Wheel</p>
<script>
    //位置
    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";

        if (!document.getElementById("message2")) return false;
        var elem = document.getElementById("message2");
        elem.style.position = "absolute";
        elem.style.left = "50px";
        elem.style.top = "50px";

        //时间——延时
        moveElement("message",200,100,10)
        moveElement("message2",125,25,20)
    }

    function moveElement(elementID,final_x,final_y,interval) {
        if (!document.getElementById) return false;
        if (!document.getElementById(elementID)) return false;
        var elem = document.getElementById(elementID);
        //表示目的地的“左”“上”位置.。这里需要用parse把字符串里的数值提取出来
        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 addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload !='function'){
            window.onload = func;
        } else {
            window.onload = function () {
                oldonload();
                func();
            }
        }
    }

    addLoadEvent(positionMessage);
    addLoadEvent(moveElement);
</script>
</body>
</html>