DOM Scripting 学习十一-Animation

最新推荐文章于 2024-07-20 08:27:55 发布

Darcyyyy

最新推荐文章于 2024-07-20 08:27:55 发布

阅读量71

点赞数

分类专栏：前端文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/Darcyyyy/article/details/126116760

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

message.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Animation</title>
    <script type="text/javascript" src="scripts/addLoadEvent.js">
    </script>
    <script type="text/javascript" src="scripts/positionMessage.js">
    </script>
    <!-- <script type="text/javascript" src="scripts/moveMessage.js">
    </script> -->
    <script type="text/javascript" src="scripts/moveElement.js">
    </script>

</head>

<body>
    <p id="message">Whee!</p>
    <p id="message2">Whoa!</p>
</body>

</html>

scripts/addLoadEvent.js

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

scripts/moveElement.js

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);
}

scripts/positionMessage.js

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);
    moveElement("message", 125, 25, 20);
    //movement = setTimeout("moveMessage()", 5000);
    //clearTimeout(movement);
    if (!document.getElementById("message2")) return false;
    var elem = document.getElementById("message2");
    elem.style.position = "absolute";
    elem.style.left = "50px";
    elem.style.top = "50px";
    moveElement("message2", 125, 75, 20);
}
addLoadEvent(positionMessage);

//clearTimeout(movement);