<!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. 【C/C++学院】0904-boost智能指针/boost多线程锁定/哈希库/正則表達式

    boost_array_bind_fun_ref Array.cpp #include<boost/array.hpp> #include <iostream> #includ ...

  2. html常用对照表

    常用对照表:http://tool.oschina.net/commons

  3. 【转】Asp.net MVC 通过自定义ControllerFactory实现构造器注入（重写DefaultControllerFactory）

    [转]Asp.net MVC 通过自定义ControllerFactory实现构造器注入 一.重写ControllerFactory的GetControllerInstance ControllerF ...

  4. 最近输入法的问题：关于ctrl + space 无法开关闭输入法的问题

    输入法无法切换最好解决方法首先任务栏上的输入法图标上点右键选择设置. 然后选择键设置,双击第一个“在不同的输入语言之间切换”先勾选“切换输入语言”下面选择左手ALT.取消右边“切换键盘布局”前的勾. ...

  5. TensorFlow-GPU：查看电脑显卡型号是否支持CUDN,以及相关软件下载与介绍

    1.显卡(GPU)是否支持CUDN https://developer.nvidia.com/cuda-gpus 2.了解基础知识 1)CUDA(Compute Unified Device Arch ...

  6. GetDlgItem的用法小结

    GetDlgItem用于获得指定控件ID的窗体指针,函数原型如下: HWND GetDlgItem( HWND hDlg, int nIDDlgItem ); CWnd* GetDlgItem(int ...

  7. 详解ABBYY FineReader 12内置的自动化任务

    要使用ABBYY FineReader处理文档,需要完成四个步骤:获取文档图像>识别该文档>验证结果>以选取的格式保存结果.如果需要再三地重复相同的步骤,您可以使用ABBYY Fin ...

  8. Core Java笔记

    前言 一·基础知识 二·定义,关键字和类型 三·表达式和控制流 四·数组 五·对象和类 六·高级语言特性 七·异常 八·图形用户接口 九·AWT(Abstract Window Toolkit) 事件 ...

  9. linux nginx svn 更新前端代码

    1.进入项目前端代码目录中 root@TServer:~# cd /home/p/web/gongti/ 2.更新svn上最新的代码版本 root@TServer:/home/p/web/gongti ...

  10. 彻底关闭Google的安全搜索

    在使用简体中文的情况下,访问Google总是会跳转到香港,这个时候的安全搜索是无法关闭的. 下面介绍一个最简单的方法,直接使用Google的中文界面:https://www.google.com/we ...