<!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. (原)U盘可见容量不能被识别的处理方法

    之前我手里有1个8G的U盘,因为前段时间借给了其他人使用,然后今天拿起来用的时候,发现8G的U盘只有200M未被识别,我用管理器下的磁盘管理查看了下,有7G的空间未被识别. 怎么办? 进入win7: ...

  2. Native Code

    Native Code — 本机代码,即已被编译为运行于特定处理器机器码的代码.        本地代码(native code)是计算机编程(代码),编译用来运行一个特殊的处理器(如英特尔x86级的 ...

  3. kubectl error: The connection to the server localhost:8080 was refused

    did you run below commands after kubeadm init To start using your cluster, you need to run (as a reg ...

  4. iOS : Blur Effect

    http://blog.bubbly.net/2013/09/11/slick-tricks-for-ios-blur-effect/ Full sample sources available at ...

  5. 环境变量PATH/cp命令/mv命令/文档查看cat/more/less/head/tail

    2.10 环境变量PATH 2.11 cp命令 2.12 mv命令 2.13 文档查看cat/more/less/head/tail which  rmdir 可以查到命令的路径 例如: ls 命令是 ...

  6. Markdown编辑器Editor.md使用方式

    摘要: 搭建个人博客时,涉及文章上传,文章展示,这里需要一个Markdown插件,mark一下. Editormd下载地址:http://pandao.github.io/editor.md/ 由于前 ...

  7. MongoDB的php可视化管理工具

    使用MongoDB命令查看很不方便 于是想把爬来的数据导出来,看爬来的数据是否正确 打开cmd,执行 mongoexport -d test -c blogs --csv -f title,link, ...

  8. 前端可视化编程：liveReload安装，sublime 3

    需要插件  sublime text3:View in Browser:LiveReload chrome:liveReload 配置方法 一:sublime text3 sublime 3下载地址: ...

  9. 手动安装Laravel

    http://www.golaravel.com/download/ 下载即可用 注意 wamp必须要在 2.5以上

  10. C#爬网页时“远程服务器返回错误: (403) 已禁止”解决方法

    HttpWebRequest myReq = (HttpWebRequest)WebRequest.Create(uri); //这个一定要加上,在某些网站没有会发生"远程服务器返回错误: ...