<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .div01 {

            position: absolute;

            left: 0;

            width: 100px;

            height: 100px;

            background: red;

        }

        button {

            position: absolute;

            top: 200px;

        }

        ul,li{

            list-style: none;

        }

    </style>

</head>

<body>

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

    <button id='js-btn'>点击控制div</button>

    <script>

    /******************************************

     缓冲运动的实际原理就是两个物体的距离相减在除

     一个数，同时要注意给这个速度值取整

    ******************************************/

    window.onload = function () {

        var div01 = document.getElementById('div01');

        var btn = document.getElementById('js-btn');

        var timer = null;

        function startMove (iTarget) {

            timer = setInterval(function(){

                var speed = 0;

                speed = (iTarget-div01.offsetLeft)/8;

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

                if( div01.offsetLeft <= iTarget ){

                    div01.style.left = div01.offsetLeft + speed + "px";

                    document.title = div01.offsetLeft  + "..." + speed;

                }else{

                    clearInterval(timer);

                }

            },100);

        }

        btn.onclick = function () {

            startMove(300);

        };

    };

    </script>

</body>

</html>

javascript 缓冲运动demo的更多相关文章

  1. Javascript 缓冲运动——逐行分析代码，让你轻松了解缓冲运动的原理

    看过上一篇关于Javascript 匀速运动文章的朋友相信对于运动已经有了初步的了解 接下来 讲一下关于缓冲运动的原理 ,我会逐行分析代码,代码简单易懂,能马上理解其中的原理,适用于初学者. #div ...

  2. day39—JavaScript缓冲运动

    转行学开发,代码100天!——2018-04-24 今天继续学习JavaScript运动之缓冲运动.相对于匀速运动,缓冲运动的不同之处在于其速度值是不断变化的,越靠近目标点,速度越小. 即可以表示为: ...

  3. 原生JavaScript运动功能系列（二）：缓冲运动

    匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...

  4. javaScript运动框架之缓冲运动

    缓冲运动 逐渐变慢,最后停止 距离越远速度越大   速度由距离决定 速度=(目标值-当前值)/缩放系数 存在Bug 速度取整 跟随页面滚动的缓冲侧边栏 潜在问题:目标值不是整数时 缓冲运动的停止条件 ...

  5. javascript运动系列第五篇——缓冲运动和弹性运动

    × 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...

  6. javascript每日一练（十）——运动二：缓冲运动

    一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...

  7. JavaScript 运动（缓冲运动，多物体运动 ,多物体多值运动+回调机制）

    匀速运动   (当需要物体做匀速运动直接调用statMove函数) function startMove(dom,targetPosetion){ //dom : 运动对象,targetPositio ...

  8. 关于javascript的运动教程

    一.javascript的匀速运动 关于物体的javascript匀速运动要点分析: 1.物体关于运动的时候,我们要打开定时器 2.打开定时器的时候我们记得要在停止的时候关闭定时器,同时应该注意的是一 ...

  9. js动画之缓冲运动

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

随机推荐

  1. python基础-软件目录开发规范

    为什么要设计好目录结构? "设计项目目录结构",就和"代码编码风格"一样,属于个人风格问题.对于这种风格上的规范,一直都存在两种态度: 一类同学认为,这种个人风 ...

  2. Java多线程——线程同步

    在之前,已经学习到了线程的创建和状态控制,但是每个线程之间几乎都没有什么太大的联系.可是有的时候,可能存在多个线程多同一个数据进行操作,这样,可能就会引用各种奇怪的问题.现在就来学习多线程对数据访问的 ...

  3. java多线程心得

    多并发的时候,在什么情况下必须加锁?如果不加锁会产生什么样的后果. 加锁的场景跟java的new thread和Runnable的关系是什么? 看看java的concurrentMap源码. 还有sp ...

  4. python代码合并

    http://www.baidu.com/s?wd=python%E4%BB%A3%E7%A0%81%E5%90%88%E5%B9%B6&rsv_bp=0&ch=&tn=mon ...

  5. Java反射 - 2(对象复制，父类域，内省)

    为什么要复制对象?假设有个类Car,包含name,color2个属性,那么将car1对象复制给car2对象,只需要car2.setName(car1.getName)与car2.setColor(ca ...

  6. 【转】常用背景色RGB数值

    [转自]http://blog.sina.com.cn/s/blog_8fc890a201013z8h.html

  7. 洛谷 P1305 新二叉树

    P1305 新二叉树 题目描述 输入一串完全二叉树,用遍历前序打出. 输入输出格式 输入格式: 第一行为二叉树的节点数n. 后面n行,每一个字母为节点,后两个字母分别为其左右儿子. 空节点用*表示 输 ...

  8. 适用于 PHP 开发人员的 Python 基础知识

    Thomas Myer, 负责人, Triple Dog Dare Media 简介: 您是一名经验丰富的 PHP 开发人员,并且希望学习 Python 吗?本文将从 PHP 开发人员的角度来探索 P ...

  9. jquery判断滚动条到底

    $(document).scroll(function(){ var dHeight = $(document).height(); var wHeight = $(window).height(); ...

  10. Hibernate对象的状态和映射

    一. Hibernate对象的状态 实体对象的三种状态: 1) 暂态(瞬时态)(Transient)---实体在内存中的自由存在,它与数据库的记录无关. po在DB中无记录(无副本),po和sessi ...