zoukankan      html  css  js  c++  java
  • 王雨的JavaScript练习05---js实现动画效果(1)

    大家复制源码自己看吧,就是通过DOM操纵元素的位置,然后用setTimeout进行循环。

    html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/addLoadEvent.js"></script>
        <script src="js/positionMessage.js"></script>
        <script src="js/moveElement.js"></script>
    </head>
    <body>
    <p id="message">Whee!</p>
    <p id="message2">Whoa!</p>
    </body>
    </html>
    

    js:

    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                oldonload();
                func();
            }
        }
    }
    
    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_y){
            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 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",125,25,20);
        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,125,20);
    }
    addLoadEvent(positionMessage);
    

    带注释的js代码:

    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                oldonload();
                func();
            }
        }
    }
    
    function positionMessage() {
        //检查浏览器支持情况,检查文档里面是否有message ID
        if (!document.getElementById) return false;
        if (!document.getElementById("message")) return false;
        //获取message,并设置它具体的style值
        var elem = document.getElementById("message");
        elem.style.position = "absolute";
        elem.style.left = "50px";
        elem.style.top = "100px";
        //调用moveElement函数,传入参数
        moveElement("message",125,25,20);
        //同上
        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,125,20);
    }
    addLoadEvent(positionMessage);
    
    function moveElement(elementID,final_x,final_y,interval) {
        //检查浏览器支持情况
        if (!document.getElementById) return false;
        if (!document.getElementById(elementID)) return false;
        //取得元素ID值并赋值给elem
        var elem = document.getElementById(elementID);
        //通过parseInt函数把style值转换成number类型
        var xpos = parseInt(elem.style.left);
        var ypos = parseInt(elem.style.top);
        //判断xpos ypos是否和最终坐标相等
        if (xpos == final_x && ypos == final_y){
            return true;
        }
        //不相等时候,xpos ypos进行相应的自加一或自减一
        if (xpos < final_x){
            xpos++
        }
        if (xpos > final_y){
            xpos--
        }
        if (ypos < final_y){
            ypos++
        }
        if (ypos > final_y){
            ypos--
        }
        //把xpos ypos赋值给elem的style.left .right,然后再加上px
        elem.style.left = xpos + "px";
        elem.style.top = ypos + "px";
        //通过自调用实现重复执行
        var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"
        movement = setTimeout(repeat,interval);
  • 相关阅读:
    实现路由的RouterMiddleware中间件
    AI: Jarvis
    使用管道(PipeLine)和批量(Batch)操作
    OSWatcher Black Box
    NET Core HTTP 管道
    开源项目!
    Router的创建者——RouteBuilder
    .NET Core)的ZooKeeper异步客户端
    single-write-database-connection
    Quartz与Spring集成 Job如何自动注入Spring容器托管的对象
  • 原文地址:https://www.cnblogs.com/blogwy/p/JavaScript.html
Copyright © 2011-2022 走看看