运动框架

　　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. MongoDB与mysql的对比

    1.与Mql对照 MySQL MongoDB 说明 mysqld mongod 服务器守护进程 mysql mongo 客户端工具 mysqldump mongodump 逻辑备份工具 mysql m ...

  2. shell脚本之awk、sed、grep案例

    1.BEGIN END用法user        DIR,内容显示用户名称.用户家目录   $NF为awk的内置变量,表示最后一行,$(NF-1)就表示倒数第二行,最后打印页脚 页眉显示 cat /e ...

  3. Oracle Rac 测试

      #还是使用之前的脚步来进行测试 #Author : Kconnie Pong Oracle@PONGDB:~> more load_balance.sh #!/bin/bash ..} do ...

  4. Dark 运算符

    1 赋值运算符 ??= b ??= "hello" 若b为空,则把"hello"赋给b . 2 三目运算符 boolean ? expression1 : ex ...

  5. 三十四：数据库之SQLAlchemy外建及四种约束

    使用SQLAlchemy创建外建,只需要在子表的字段中指定此字段的外建是哪个表的哪个字段即可,字段类型需和父表下该字段的类型保持一致 使用ondelete指定约束, 外建约束有以下几种:1.RESTR ...

  6. overflow-x scroll 内部元素滚动,父级容器代码

    display: -webkit-box; overflow-x: scroll; -webkit-overflow-scrolling: touch;

  7. Java List集合 遍历 四种方式（包含 Lambda 表达式遍历）

    示例代码如下: package com.miracle.luna.lambda; import java.util.ArrayList; import java.util.List; /** * @A ...

  8. Javascript获取html元素的几种方法

    1.通过id获取html元素 <!DOCTYPE html> <html> <head lang="en"> <meta charset= ...

  9. Oracle 笔记（三）

    Oracle的数据库对象 七大对象:用户.表.约束.序列.视图.同义词和索引 知识点一:用户  -  User  -  账户.管理员-一切对象的宿主 1.创建用户 ???? 2.授权 ???? 授权+ ...

  10. java：Oracle（table的增删改查，data的增删改查）

    1.oracle命名规范:和Java的命名规范很像 1.严格区分大小写 2.所有的sql语句都要以';'结尾 3.所有的sql 都要使用空格区分:sqlplus空格/空格as空格sysdba回车 4. ...