<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>缓冲运动2</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的准确位置，原因是？*/

            }

        </style>

        <script type="text/javascript">

        window.onload = function(){

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

        oBtn.onclick = function(){

            start();

        }

        }

        function start(){

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

            setInterval(function(){

                var speed = Math.ceil((300-oDiv.offsetLeft)/10);

                //300,是自己定义的他要停止的位置值，

                //除以10 是必须的，这样就能有效地成倍地降低速度值，注意，更改10的值，可以更改速度，这个10所在分母位置的数值越大，速度越小。

//                var speed = Math.ceil((300-oDiv.offsetLeft)/10);

                //如果整除不了，会有0.5px，有了小数点，计算机会直接删掉小数点后的数字，导致物体运动不到准确位置。所以最后，用math的ceil方法，向上取整；floor方法，向下取整。

                //因为向左走向右走是不确定的，所以用三元判断的方法，如下：

                speed = speed>0?Math.ceil(speed):Math.floor(speed);

                //但凡遇到缓冲运动，一定要取整

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

                document.title = oDiv.offsetLeft+','+speed;//用以检查、调试运动点是否正常

            },30);

        }

        </script>

    </head>

    <body>

        <p>关键点：</p>

        <a>距离大，速度大</a>，，，

        <a>距离小，速度小</a>

        <a>距离和速度成正比</a>

        <p style="color: brown;">关键点:遇到“缓冲运动”，一定要取整</p>

        <input type="button" value="运动" id="btn" />

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

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

    </body>

</html>

课程来源路径：智能社得开发课程：https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc

JS-缓冲运动基础结构的更多相关文章

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

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

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

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

  3. js缓冲运动

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

  4. JS缓冲运动案例

    点击"向右"按钮,红色的#red区块开始向右缓冲运动,抵达到黑色竖线位置自动停止,再次点击"向右"#red区块也不会再运动.点击"向左"按钮 ...

  5. [Js]缓冲运动

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

  6. JS 缓冲运动 带运动的留言本 小案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  7. js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  8. js实现缓冲运动，和匀速运动有点不相同

    缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...

  9. js动画之缓冲运动

    缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...

  10. JS运动基础(二) 摩擦运动、缓冲运动

    摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...

随机推荐

  1. (转)解决Win7/8硬盘占用高方案汇总

      写在前面       在Windows7时代,很少人会抱怨硬盘占用率高的问题.但是到了Windows7/8.1时,硬盘占用率成为一个扰人的问题.硬盘占用率经常100%会导致系统卡.慢,而且也很伤硬 ...

  2. VMware虚拟CentOS 6.5在NAT模式下配置静态IP地址及Xshell远程控制配置

    VMware虚拟CentOS 6.5在NAT模式下配置静态IP地址及Xshell远程控制配置 标签: LinuxXshellCentOS 2016-10-15 04:58 127人阅读 评论(0) 收 ...

  3. Linux 查看操作系统版本

    在下载软件的时候,需要知道操作系统对应的版本,通过 cat /etc/issue 可以查看对应信息 运行的结果如下: CentOS release 6.7 (Final) Kernel \r on a ...

  4. drools研究后记

    在实际工作中,有关于达标推断的业务逻辑 就是谁谁谁 消费满了多少钱.就返多少钱的优惠券 声明:不是drools不好,仅仅是在我遇到的场景下,不合适,不够好 在使用drools的时候发现有例如以下问题: ...

  5. 【Deep Learning】RNN的直觉理解

    https://ujjwalkarn.me/2016/08/11/intuitive-explanation-convnets/

  6. Android学习之——GridView

    背景知识 GridView在Android开发中和ListView一样经常被使用.如我们经常使用的快图浏览,里面就有将图片的布局改为网格(即GridView)的选项.还有约X神器——陌陌的搜索界也是用 ...

  7. VSCode升级后启动不了~

    之前安装了VSCode,一直用的好好的,每次启动后后下角总会提示自己有新版本可以更新,然后就手贱点击了更新,然后就出问题了,更新后VSCode无法启动,打不开了,哭死! 于是,我尝试了以下方法,均无济 ...

  8. spring核心之AOP学习总结二

    一:springAOP常用的注解 @Aspect:声明方面组件 @Before:声明前置通知 @After-returning:声明后置通知 @After:声明最终通知 @Around:声明环绕通知 ...

  9. Golang优秀开源项目汇总

    https://blog.csdn.net/hackstoic/article/details/52008307

  10. nano-sql.js的基本操作

    nano-sql是一个小而快的数据库引擎, 他支持联合查询, 分组, 事务, ORM等功能, 支持 内存, indeedDB, Local Storage, WebSQL, Level DB 注意第一 ...