运动框架

　　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. IDEA基础配置

    详细IDEA使用请参考 https://www.w3cschool.cn/intellij_idea_doc/ 下面的内容都是从别人手中收集之后整理的: 全局设置 修改主题 修改字体 修改控制台字体 ...

  2. C++入门经典-例3.13-不加break的switch判断语句

    1:不加break,会依次运行下面的语句,代码如下: // 3.13.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include &l ...

  3. MSO Transponder 页面开发思路

    1. 确定Transponder开发页面分类,定义负责模块 2. 定义模块页面布局 3. 选择页面各数据对应的控件类型 4. 选定控件对应set/get所用方式 快捷键链接设置: http://www ...

  4. spark MLlib 概念 2：Stratified sampling 层次抽样

    定义: In statistical surveys, when subpopulations within an overall population vary, it is advantageou ...

  5. 小程序的autocomplete

    1.别做单个组件的autocomplete了,很坑,牵扯的坑太多,最后碰到原生组件canvas会让人欲哭无泪 2.单个组件的路走不通,走新页面吧,点击input框,进入到下个页面,搜所后选择,点击完成 ...

  6. android中builder模式的使用

    变种的Builder模式的自动化生产实现: AS安装插件  Innerbuilde 新建User类 public class User { private final String name; //必 ...

  7. 三十六：数据库之SQLAlchemy外建之一对一关系

    relationship()的uselist参数默认为True,即一对多,如果要一对一,则需让uselist=False 准备工作 from sqlalchemy import create_engi ...

  8. 十二：jinja2模板中使用url_for

    在页面中,有点击跳转到另一个地址的时候,可以使用url_for来指定要跳转的视图函数:{{ url_for('view_function') }} 如果该视图需要接收参数

  9. LoadRunner 技巧之 检查点

    LoadRunner 技巧之 检查点 判断脚本是否执行成功是根据服务器返回的状态来确定的,如果服务器返回的HTTP状态为 200 OK ,那么VuGen 就认为脚本正确地运行了,并且是运行通过的.在绝 ...

  10. QDataSet – 如何比较两个数据集内容的差异

    QDataSet 提供了两个函数来比较两个数据集的差异,并将结果保存到第三个数据集. procedure Intersect(ASource1, ASource2: TQDataSet; AField ...