运动框架

　　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. Hibernate理解？

    (1)Hibernate是对象关系映射框架,对JDBC进行非常轻量级的对象封装,是全自动的ORM框架,可以自动生成SQL语句.自动执行. (2)语言特点 <1>将对数据库的操作转换为对Ja ...

  2. kotlin 冷知识 *号 展开数组

    Kotlin笔记-冷门知识点星号(*) 2019年05月10日 11:37:00 weixin_33724059 阅读数 6   可变参数展开操作符 在数组对象前加*号可以将数组展开,方便传值,比如: ...

  3. TCP定时器 之 保活定时器

    在用户进程启用了保活定时器的情况下,如果连接超过空闲时间没有数据交互,则保活定时器超时,向对端发送保活探测包,若(1)收到回复则说明对端工作正常,重置定时器等下下次达到空闲时间:(2) 收到其他回复, ...

  4. echarts_02

    1. 如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载. ECharts 默认有提供了一个简单的加载动画. ...

  5. spark 笔记 2： Resilient Distributed Datasets: A Fault-Tolerant Abstraction for In-Memory Cluster Computing

    http://www.cs.berkeley.edu/~matei/papers/2012/nsdi_spark.pdf  ucb关于spark的论文,对spark中核心组件RDD最原始.本质的理解, ...

  6. 线性回归和正则化（Regularization）

    python风控建模实战lendingClub(博主录制,包含大量回归建模脚本和和正则化解释,2K超清分辨率) https://study.163.com/course/courseMain.htm? ...

  7. SQL server中的一些查询

    SQL 不同于与其他编程语言的最明显特征是处理代码的顺序.在大数编程语言中,代码按编码顺序被处理,但是在SQL语言中,第一个被处理的子句是FROM子句,尽管SELECT语句第一个出现,但是几乎总是最后 ...

  8. 阶段3 2.Spring_03.Spring的 IOC 和 DI_11 set方法注入

    复制AccountServiceImpl类改名叫做AccountServiceImpl2 生成三个属性值的set方法.注入只需要set方法,并不需要get方法 配置bean,用到property这个标 ...

  9. jquery用formada发送文件到服务器

    var formdata = new FormData(); formdata.append("file", $("#Input")[0].files[0]); ...

  10. 四十七：数据库之alembic数据库迁移工具的基本使用

    在一般情况下,如果修改了模型,如增加或者删除了字段,SQLAlchemy是不会更新的,这就需要使用alembic来实现 使用alembic步骤:一:定义好模型二:使用alembic创建一个仓库:ale ...