运动框架

　　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. SpringMVC学习记录(六)--Validator验证

    一.基于Validator接口的验证. 首先创建User实例,并加入几个属性 public class User { private String username; private String p ...

  2. PHP 设置Cookie值注意项

    Cookie 中的value值只能添加设置为String类型的字符串数据,但我们需要添加如数组,json串等其他类型的数据时,我们就要先对数据进行转换,再存入Cookie里了. Cookie 存储数组 ...

  3. leetcode-easy-string-344 Reverse String

    mycode class Solution(object): def reverseString(self, s): """ :type s: List[str] :rt ...

  4. 初始化EPT

    struct eptp_bits { unsigned memory_type :; /* 0: UC uncacheable, 6: WB writeback */ unsigned pagewal ...

  5. 使用hash方法切割文件

    如果有大型数据文件(如每行为url或者ip或者单词等的),以G为单位的,处理的时候需先切分.普通切分方法直接根据数据条数切分,得到的每个文件大小相近. 但是有时需要将相同数据放到相同文件中.可以使用h ...

  6. [doker]ubuntu18安装doker

    ubuntu安装doker很简单,分4个步骤: Step1:更新资源库并安装apt-transprot-https软件包. 在安装Docker前, 首拉取最新的软件资源库 wangju@wangju- ...

  7. 第四章 SpringCloud之Eureka-Client实现服务(Jpa，H2)

    1.pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...

  8. 关于函数中参数kwarg.setdefault()的用法

    1.kwarg.setdefault() setdefault()是给字典传递一个默认值    当给字典传递数据时 setdefault()是字典默认的一个参数,当有新的数据时,就会使用新的数据

  9. Tomcat 部署两个工程时，另一个访问出现404

    tomcat下部署两个工程时,只有一个可以访问,另一个出现404错误,该如何解决 在开发新项目的时候,有时候为了省时,直接把曾经做过的项目工程A拷贝成改名为B工程,然后再在B工程上进行功能的开发, 此 ...

  10. eureka和zookeeper的区别？

    eureka和zookeeper都可以提供服务注册与发现的功能,       zookeeper 是CP原则,强一致性(consistency)和分区容错性(Partition).       eur ...