<!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. gitlab的安装和基本维护

    基本介绍 GitLab是一个自托管的Git项目仓库,可以自己搭建个人代码管理的仓库,功能与github类似. 安装 操作系统:CentOS6.5 gitlab官网下载安装地址:https://abou ...

  2. Java写 插入 选择 冒泡 快排

    /** * Created by wushuang on 2014/11/19. */ public class SortTest { @Test public void mainTest() { i ...

  3. ExtJS中给Tree节点加click事件

    第一种: 直接通过TreePanel中的Config Option中的listener来添加,代码如下: var TreePan = new Ext.tree.TreePanel({ id: 'Tre ...

  4. 如何使用 MasterPage

    MasterPageFile母版页 刚开始学,什么都不懂,看到了这段代码,才促使自己去研究MasterPageFile到底是什么含义.<%@ Page Language="C#&quo ...

  5. linux中高亮显示文本的工具 -- bat

    bat 的项目地址 https://github.com/sharkdp/bat bat 是用rust 开发的, 在centos中安装bat需要rust的环境, 我们可以通过安装rust的包管理工具c ...

  6. [原]unity3d ios平台内存优化（一）

    关于内存优化,人云亦云 各有己见.本文将通过设置Strpping Level ,减少内存使用. 先看三幅图: 1.没做任何优化,默认选项 2.设置Stripping level 为 Use micro ...

  7. 配置ORACLE 11g绿色版客户端和PLSQL远程连接环境

    配置ORACLE 11g绿色版客户端和PLSQL环境   本方法是通过使用ORACLE官方提供的精简版客户端,即绿色免安装的客户端.   Instant client的版本很多:主要是Basic和Ba ...

  8. nuget包循环引用问题

    1.项目中有类库YesWay.Nlog.RabbitMQ,依赖项如下YesWay.Nlog.RabbitMQ=>YesWay.Service.Discovery=>YesWay.Log 2 ...

  9. struts开发&lt;struts中的參数传递.三&gt;

    不说废话,直接上干货 1.通过set和get传递參数 添加username 和password两个属性并添加set和get方法 package fzl.user.struts.demo; import ...

  10. Java使用泛型实现栈结构

    泛型是Java SE5.0的重要特性,使用泛型编程可以使代码获得最大的重用.由于在使用泛型时要指明泛型的具体类型,这样就避免了类型转换.本实例将使用泛型来实现一个栈结构,并对其进行测试. 思路分析:既 ...