js实例二(动画)

最新推荐文章于 2024-10-14 10:36:20 发布

ZzDIY

最新推荐文章于 2024-10-14 10:36:20 发布

阅读量455

点赞数

分类专栏： js训练文章标签： javascript

本文链接：https://blog.csdn.net/qq_43526925/article/details/93416224

版权

js训练专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用JavaScript来创建字母移动的动画效果。在Visual Studio Code中编写代码，并在Google Chrome中进行调试。主要涉及了三个脚本：addLoadEvent.js用于处理多个事件，positionMessage.js用于设置元素的位置，而moveElement.js则负责实际的元素移动功能。通过repeat变量，将元素ID转化为字符串并结合坐标和间隔时间，实现了元素的动态移动。

摘要由CSDN通过智能技术生成

js实现字母移动

编译器：Visual studio Code
代码都是在Google Chrome里调试。

html代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UFT-8">
        <title>js动画</title>
        <link href="css/03.css" rel="stylesheet">
    </head>
    <body>
        <p id="message">Whee!</p>
        <p id="message2">whoa!</p>
        <script type="text/javascript" src="js/addLoadEvent.js"></script>
        <script type="text/javascript" src="js/positionMessage.js"></script>
        <script type="text/javascript" src="js/moveElement.js"></script>
    </body>
</html>

addLoadEvent.js
为了能有多个事件需要执行而设置的，这里不需要，但也可以用￥。￥。

function addLoadEvent(func)
{
    var oldonload = window.onload;
    if(typeof oldonload != 'function')   //判断是否存在function
    {
        window.onload = func;     
    }
    else
    {
        window.onload = function()     //执行多个
        {
            oldonload();
            func();
        }
    }
}

positionMessage.js
给message和message2定位。

function positionMessage()
{
    var elem = document.getElementById("message");
    elem.style.position = "absolute";        //绝对定位
    elem.style.left = "50px";
    elem.style.top = "100px";
    moveElement("message",125,25,20);        //调用moveElement函数
    var elem = document.getElementById("message2");
    elem.style.position = "absolute";
    elem.style.left = "50px";
    elem.style.top = "50px";
    moveElement("message2",125,125,20);     //调用moveElement函数
}

moveElement.js
移动message和message2。

function moveElement(elementID,final_x,final_y,interval)         //抽象
{
    var elem = document.getElementById(elementID);
    var xpos = parseInt(elem.style.left);     //parseInt转化为整型数字
    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);
}