<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>匀速运动停止条件</title>

        <style type="text/css">

        a{display: block;}

        input[type='button']{

            margin-top: 5px;

        }

            .div {

                width: 100px;

                height: 100px;

                background-color: red;

                position: absolute;

                left: 0;

                top: 200px;

                cursor: pointer;

            }

            .div2{

                width: 1px;

                height: 1200px;

                position: absolute;

                left: 300px;

                top: 0;

                background-color: blueviolet;

                /*用这个标杆，发现div1并没有走到300的准确位置，原因是？*/

            }

            .div3{

                width: 1px;

                height: 1200px;

                position: absolute;

                left: 100px;

                top: 0;

                background-color: blueviolet;

                /*用这个标杆，发现div1并没有走到300的准确位置，原因是？*/

            }

        </style>

        <script type="text/javascript">

        window.onload = function(){

            var oBtn = document.getElementById('btn');

            var oBtn2 = document.getElementById('btn2');

            oBtn.onclick = function(){

                start(100);

            }

            oBtn2.onclick = function(){

                start(300);

            }

        }

        var timer = null;

        function start(iTarget){

        var oDiv = document.getElementById('div');

            clearInterval(timer);

            timer = setInterval(function(){

                var speed = 0;

                if(oDiv.offsetLeft<iTarget){

                    speed = 7;

                }else{

                    speed = -7;

                }

                //这种个情况就是速度不能被整除的时候会出现的问题。

                //思路就像到一个地方下车，距离近了就算到了，不一定分要撞到墙上才算到了。

//                ?解决方法:Math.abs()：绝对值,一个数，正负号都取正值

                if(Math.abs(iTarget-oDiv.offsetLeft)<=7){

                    clearInterval(timer);

                    //oDiv.style.left = iTarget;

                    //最后忘了加px,所以还是有点距离有点问题。

                    oDiv.style.left = iTarget+'px';

                }else{

                    oDiv.style.left = oDiv.offsetLeft+speed+'px';

                    document.title = oDiv.offsetLeft+','+speed;

                }

            },30);

        }

        </script>

    </head>

    <body>

        <input type="button" value="到100" id="btn" />

        <input type="button" value="到300" id="btn2" />

        <div class="div" id="div"></div>

        <div class="div2"></div>

        <div class="div3"></div>

    </body>

</html>

智能社的开发教程：原址：https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc

JS-匀速运动-运动停止的更多相关文章

  1. [Js]弹性运动

    描述:像弹簧一样左右弹动,最后缓慢停下来 一.加减速运动 1.加速运动 var iSpeed=0;iSpeed++; 速度越来越快,最后冲出去 2.减速运动 var iSpeed=20;iSpeed- ...

  2. [Js]高级运动

    一.链式运动框架 1.他需要一个回调函数,在运动停止时,开始下一次运动(执行函数) 多物体运动框架改为如下: function startMove(obj,attr,iTarget,fn){ ... ...

  3. JS缓冲运动案例：右侧居中悬浮窗

    JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...

  4. JS缓冲运动案例：右下角悬浮窗

    JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...

  5. JS的运动1（从简单到复杂运动，从单一属性到多属性同时进行的运动过程分析）

    js运动原理 运动基础 在js中,让一个元素动起来的最简单的方式,就是点击按钮,让元素移动.下面是一个简单的案例:(下面几个案例的的html和css都是采用这个为例) <!DOCTYPE htm ...

  6. js匀速运动框架案例

    点击"开始运动"按钮,红色的#red区块开始向右匀速运动,抵达到黑色竖线位置自动停止,再次点击"开始运动"#red区块也不会再运动.同时为了便于后期维护,要求运 ...

  7. [Js]缓冲运动

    一.运动框架 1.在开始运动时,关闭已有定时器(否则会不断有新的定时器执行) 2.把运动和停止隔开(if/else) 二.缓冲运动 逐渐变慢,最后停止(距离越远速度越大) 速度=(目标值-当前值)/缩 ...

  8. JS完美运动框架

    这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (o ...

  9. js匀速运动停止条件

    匀速运动,怎么让它到达指定位置时停止呢? 原理: 1,物体和目标的差值距离小于等于速度时,即停止 2,接着让物体移动位置等于目标位置 示例:匀速运动停止 html部分 <input type=& ...

  10. js缓冲运动

    缓冲运动 现象:逐渐变慢,最后停止 原理:距离越远,速度越大 速度的计算方式: 1,速度由距离决定 2,速度＝(目标值-当前值)/缩放系数 说明:速度为正负数时,也决定了物体移动的方向 示例:div缓 ...

随机推荐

  1. 关于pthread_cond_wait使用while循环判断的理解

    在Stevens的<Unix 环境高级编程>中第11章线程关于pthread_cond_wait的介绍中有一个生产者-消费者的例子P311,在进入pthread_cond_wait前使用w ...

  2. 统一处理jquery ajax请求过程中的异常错误信息的机制

    当jQuery ajax向服务器发送请求,服务器发生异常,比如:400.403.404.500等异常,服务器将异常响应给客户端,此时的ajax可以获取异常信息并进行处理,但此时我们一般是跳转到与异常编 ...

  3. java定时任务Timer与ScheduledExecutorService<转>

    在我们编程过程中如果需要执行一些简单的定时任务,无须做复杂的控制,我们可以考虑使用JDK中的Timer定时任务来实现.下面LZ就其原理.实例以及Timer缺陷三个方面来解析java Timer定时器. ...

  4. Android——ArrayList 、LinkList、List 区别 & 迭代器iterator的使用 & HashMap、Hashtable、LinkedHashMap、TreeMap

     ArrayList .LinkList.List 区别 & 迭代器iterator的使用 & HashMap.Hashtable.LinkedHashMap.TreeMap 一.几个 ...

  5. 数据库——SQL中EXISTS怎么用2（转）

    数据库sql语句的exists总结 sql exists in 学习 先来比较下语法: --deals=交易表,areas=地域表,例如香港:我们的目的:查看有交易的地域 select * from ...

  6. linux_UAPI_转

    转自:Linux Kernel UAPI 问题描述 从3.5开始,Linux Kernel 里多了一个 uapi 文件夹,里面放了很多 Linux Kernel 各个模块的头文件.如果是第一次碰到,可 ...

  7. java多线程面试题整理及回答

    1)现在有T1.T2.T3三个线程,你怎样保证T2在T1执行完后执行,T3在T2执行完后执行? 这个线程问题通常会在第一轮或电话面试阶段被问到,目的是检测你对”join”方法是否熟悉.这个多线程问题比 ...

  8. iOS边练边学--view的封装

    一.view封装的思路: *如果一个view内部的子控件比较多,一般会考虑自定义一个view,把它内部的子控件的创建屏蔽起来,不让外界关心 *外界可以传入对应的模型数据给view,view拿到模型数据 ...

  9. 可能是目前最完整的前端框架 Vue.js 全面介绍

    Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...

  10. sparkr基本操作1

    由于装的sparkr是1.4版本的,老版本的很多函数已经不再适用了. 在2台服务器的组成的集群中测试了一版数据,熟悉下这个api的基本操作.​ libpath <- .libPaths() li ...