运动框架

　　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：

javaScript运动框架之匀速运动的更多相关文章

  1. 好程序员技术教程分享JavaScript运动框架

    好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...

  2. 【repost】JavaScript运动框架之速度时间版本

    一.JavaScript运动框架之速度版 1.1 运动框架的实现思路 运动,其实就是在一段时间内改变 left . right . width . height . opactiy 的值,到达目的地之 ...

  3. javascript运动框架（三）

    迟到了好几天,不好意思哈!继续来优化一下javascript运动框架的代码.之前的代码存在bug,当重复点击时速度会加快,那么怎么解决这个bug呢? 现在我们就来解决一下,其实很简单,在开始运动时,关 ...

  4. 【原生JS组件】javascript 运动框架

    大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,须要写非常多运动的 ...

  5. javascript运动框架

    下面这个一个运动框架可以控制元素在一个属性上的运动,同时,可以调用回调函数. /* 获取元素某个属性的值 @obj: 对象 @attr: 属性值 */ function getStyle(obj, a ...

  6. JavaScript 运动框架 Step by step（转）

    1,运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.动画的原理就是把不同状态的物体,串成连续的样 ...

  7. JavaScript 运动框架

    <script> window.onload=function (){ var oDiv=document.getElementById("div1"); oDiv.o ...

  8. javascript运动框架（二）

    紧接着上面写的... 给div加一个边框,border:1px solid black window.onload = function(){      var div = document.getE ...

  9. 适用于CSS2的各种运动的javascript运动框架

    <script> window.onload = function() { //var oDiv1 = document.getElementById('box1'); //var oDi ...

随机推荐

  1. win10上的docker怎么设置开机不要自动启动 [问题点数：20分，结帖人xyq1986]

    次win开机都自动启动docker,感觉很耗资源,docker只是有时开发时需要用到,在docker的setting上的Start Docker Desktop when you log in取消了也 ...

  2. jQuery file upload --Multiple File Input Fields in One Form

    The plugin can be applied to a form with multiple file input fields out of the box. The files are se ...

  3. Docker报错： TLS handshake timeout”。

    Docker 默认拉取国外镜像,换成国内就搞定. 为了永久性保留更改,您可以修改 /etc/docker/daemon.json 文件并添加上 registry-mirrors 键值. {  &quo ...

  4. vscode + php+ftp

    首先,php网站的文件都整理到一个文件夹中: 然后,用vscode的File.Open Folder打开刚才的文件夹: 3,Ctrl+Shift+P,输入SFTP:Config,会打开一个配置文件,编 ...

  5. Screen Painter 程序设计

    一.Screen 的创建及维护, TCode:SE51 输入程序名称,单击[建立], 程序1000为SAP预留屏幕号,屏幕号必须定义1000外的其他数字,且最多不超过四位, 本例定义屏幕为SAP预留屏 ...

  6. shell历史命令

    1.每分钟备份历史命令 制定计划任务:每分钟执行备份历史命令的脚本 注意:要用python写计划任务脚本,因为用shell脚本写的计划任务总是不执行 先写脚本: [root@master ~]# ca ...

  7. cocos2dx基础篇(27) 屏幕适配

    [3.x]https://blog.csdn.net/qq_40338728/article/details/82964046 [屏幕适配] 1.两个分辨率 1.1.窗口分辨率 在main.cpp中有 ...

  8. 【神经网络与深度学习】【CUDA开发】【VS开发】Microsoft官方移植了Caffe配置过程说明

    想在Windows平台使用Caffe,吭哧吭哧下载了半天第三方库,后来忽然发现Microsoft官方移植了Caffe,配置起来简直太省心了- 1. 从Microsoft官方Github上下载Caffe ...

  9. 微信小程序资源整理

    微信小程序相关的文档.教程.开源项目等资源的整理,以便于开发学习使用. —— —— 收录仅作个人学习使用,涉及侵权行为及时联系: maple_6392@163.com 项目地址:GitHub | 码云 ...

  10. mac下mysql重置密码及使用用户和密码登陆

    回车后 登录管理员权限 sudo su回车后输入以下命令来禁止mysql验证功能 ./mysqld_safe --skip-grant-tables &回车后mysql会自动重启(偏好设置中m ...