zoukankan      html  css  js  c++  java
  • javaScript运动框架之匀速运动

    运动框架

      1.在开始运动时,关闭已有定时器

           2.把运动和停止隔开(if/else)

    匀速运动的停止条件

      运动终止条件:距离足够近

    Demo代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>匀速运动</title>
        <style>
            .sport {
                width: 60px;
                height: 60px;
                background-color: orange;
                border-radius: 5px;
                position: absolute;
                top: 60px;
                text-align: center;
                line-height: 60px;
            }
    
            #div1 {
                top: 60px;
                left: 0;
            }
    
            #div2 {
                top: 150px;
                left: 900px;
            }
    
            #reference {
                width: 1px;
                height: 260px;
                background-color: red;
                position: fixed;
                top: 20px;
                left: 450px;
            }
        </style>
        <script>
            function startMove(obj, iTarget) {
                let timer = null; //定时器id
                let oDiv1 = document.getElementById(obj);
    
                clearInterval(timer); //重点注意开启新的定时器前,需要把旧的定时器闭关,否则会产生多个定时器!
                timer = setInterval(function () {
                    let iSpeed = 0;
                    let l = oDiv1.offsetLeft - iTarget; // l = 运动物体与目标物体之间的距离
                    iSpeed = l > 0 ? -8 : 8; //判断运动方向
                    if (Math.abs(l) < iSpeed) { //Math.abs() 绝对值;匀速运动时,当距离l < 速度iSpeed则可以表示运动物体已到达目的地(判断条件)
                        clearInterval(timer); //闭关定时器  
                        oDiv1.style.left = iTarget + 'px'; // 闭关定时器时可能运动物体只是接近目的地而非完美到达,所以需要手动设置完美抵达目的地!
                    } else {
                        oDiv1.style.left = oDiv1.offsetLeft + iSpeed + 'px'; //运动过程
                    }
                }, 30);
    
            }
        </script>
    </head>
    
    <body>
        <input type="button" value="开始运动" onclick="startMove('div1',450)" />
        <input type="button" value="开始运动" onclick="startMove('div2',450)" />
        <div id="div1" class="sport">A</div>
        <div id="div2" class="sport">B</div>
        <div id="reference"></div>
    </body>
    
    </html>

      

    效果图1:

    效果图2:

    路漫漫其修远兮,吾将上下而求索
  • 相关阅读:
    HAProxy、Keepalived 在 Ocatvia 的应用实现与分析
    Octavia 的 HTTPS 与自建、签发 CA 证书
    Octavia 创建 loadbalancer 的实现与分析
    OpenStack Rally 质量评估与自动化测试利器
    自建 CA 中心并签发 CA 证书
    Failed building wheel for netifaces
    通过 vSphere WS API 获取 vCenter Datastore Provisioned Space 置备空间
    OpenStack Placement Project
    我们建了一个 Golang 硬核技术交流群(内含视频福利)
    没有图形界面的软件有什么用?
  • 原文地址:https://www.cnblogs.com/jsanntq/p/7695798.html
Copyright © 2011-2022 走看看