<!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. nginx+Uwsgi+Django总结与分析

    配置与调试nginx与uwsgi 參考: 1.uWSGI其三:uWSGI搭配Nginx使用 2.学习VirtualEnv和Nginx+uwsgi用于django项目部署 3.部署备忘 4.nginx+ ...

  2. .NET Best Practices

    Before starting with best practices tobe followed, it is good to have clear understanding of how mem ...

  3. AsmTools

    前言 https://wiki.openjdk.java.net/display/CodeTools/asmtools 在OpenJDK里有一个AsmTools项目,用来生成正确的或者不正确的java ...

  4. [Learn AF3]第七章 App framework组件之Popup

    AF3的弹出对话框Popup 组件名称:Popup 是否js控件:是,$.afui.popup     说明:af3中的popup和af2中相比变化不大,依然是通过插件popup来实现的     方法 ...

  5. Peckham添加引用文件模糊匹配智能提示

    下载地址:https://github.com/markohlebar/Peckham ​ 跟VVDocumenter规范注释生成器的安装方式一样: 下载开源工程在Xcode重新编译运行会自动安装此插 ...

  6. datatable删除一行方法

    t.row($(e).parents('tr')[0]).remove().draw(false); t为定义的datatable对象,row里面传入当前行的DOM元素.

  7. koa2入门学习

    koa模块 koa-route 路由 route.get("路径",路由函数) koa-static 静态资源加载     const serve(路径) koa-compose  ...

  8. Java 连接 Access数据库方式

    import <a href="http://lib.csdn.net/base/java" class='replace_word' title="Java 知识 ...

  9. V8学习资源

    http://wenku.baidu.com/link?url=7mk6ib9IJ-1K_-bFVZ-fXXo2nbI3jOJ3cnhr3XC3b08fPOKkc9v8vSAd-DgNMJZ2vdjg ...

  10. PDF文件转换成Excel表格的操作技巧

    我们都知道2007以上版本的Office文档,是可以直接将文档转存为PDF格式文档的.那么反过来,PDF文档可以转换成其他格式的文档吗?这是大家都比较好奇的话题.如果可以以其他格式进行保存,就可以极大 ...