缓冲运动

　　逐渐变慢，最后停止

　　距离越远速度越大

　　　  速度由距离决定

　　　　速度=(目标值-当前值)/缩放系数

　 存在Bug

　　　　速度取整

　　　　跟随页面滚动的缓冲侧边栏

　　　　　　潜在问题：目标值不是整数时

缓冲运动的停止条件

　　运动终止条件：两点重合（即运动物体和目的地重合）

Demo代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>缓冲运动</title>

    <style>

        .sport {

            width: 60px;

            height: 60px;

            background-color: #FC4209;

            border-radius: 5px;

            position: absolute;

            top: 60px;

            text-align: center;

            line-height: 60px;

        }

        #div1 {

            top: 60px;

            left: 0;

        }

        #div2 {

            top: 150px;

            left: 900px;

        }

        #reference {

            width: 1px;

            height: 260px;

            background-color: black;

            position: fixed;

            top: 20px;

            left: 450px;

        }

    </style>

    <script>

        function startMove(obj, iTarget) {

            let timer = null;

            let oDiv1 = document.getElementById(obj);

            clearInterval(timer);

            timer = setInterval(function () {

                let iSpeed = (iTarget - oDiv1.offsetLeft) / 12;

                // Math.ceil() 向上取整   Math.floor() 向下取整

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

                if (oDiv1.offsetLeft == iTarget) {

                    clearInterval(timer);

                } else {

                    oDiv1.style.left = oDiv1.offsetLeft + iSpeed + 'px';

                }

            }, 30);

        }

    </script>

</head>

<body>

    <input type="button" value="开始运动" onclick="startMove('div1',450)" />

    <input type="button" value="开始运动" onclick="startMove('div2',450)" />

    <div id="div1" class="sport">A</div>

    <div id="div2" class="sport">B</div>

    <div id="reference"></div>

</body>

</html>

　

效果图A：

效果图B：

　

javaScript运动框架之缓冲运动的更多相关文章

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

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

  2. JS运动---运动基础（缓冲运动）

    (1)手风琴效果 分析: (2)基础缓冲运动 接下来取整 原因: px为计算机识别的最小单位,1px无法再往下拆分.所以css如果取值200.5px,解析时计算机会自动将其改为200px注意:这里的数 ...

  3. Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理

    所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...

  4. Javascript之运动框架2

    运动框架2与运动框架1的不同之处在于,运动框架2是框架1的升级版,首先完善了传入值,改为move(obj,json,options),在options里面,可以选择传入或者不传入时间,运动形式,以及函 ...

  5. JS学习之路，之弹性运动框架

    弹性运动:顾名思义,就如同物理中的加速减速运动,当开始时速度过大,到达终点时,速度不会立刻停下,而是再前进一段距离,而后再向相反方向运动,如此往复. var timer=null; var speed ...

  6. javascript中的动画的实现以及运动框架的编写（1）

    大家知道js可以做出好多很漂亮的动画,看上去很神奇,其实原理很简单,今天就讨论一下js动画的实现以及如何编写可以反复重用的运动框架. 首先做一个简单的例子,我这里有一个长50px 宽20px的长条形d ...

  7. 好程序员技术教程分享JavaScript运动框架

    好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...

  8. 点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)

    效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...

  9. JavaScript 基础入门11 - 运动框架的封装

    目录 JavaScript 运动原理 运动基础 简单运动的封装 淡入淡出 不同属性的设置 多属性值同时运动 运动回调,链式运动 缓冲运动 加入缓冲的运动框架 案例1 多图片展开收缩 运动的留言本 Ja ...

随机推荐

  1. 常用javaScript小常识

    javascript数据类型强制转换 一.转换为数值类型 Number(参数) 把任何的类型转换为数值类型 A.如果是布尔值,false为0,true为1 B.如果是数字,转换成为本身.将无意义的后导 ...

  2. windos 启动redis服务端与客户端

    服务端:1-win+R 打开命令行2-cd至redis目录,例如 G:\Redis63813-输入 redis-server.exe redis.windows.conf观察是否如图1:至此,已成功: ...

  3. 算法 - DNA搜索 - Ako Corasick

    场景:从很长的字符串(输入字符串.DNA)中搜索大量固定字符串(字典.基因) 题目:Determining DNA Health | HackerRank 算法:Aho–Corasick algori ...

  4. php URL处理函数

    parse_url()    basename()    pathinfo()    dirname() 用法 parse_url() 是一计算机函数,功能是解析一个 URL 并返回一个关联数组,包含 ...

  5. vim 编辑提示swap file already exists 解决方法

    linux服务器上编辑 .ini 文件时卡死,关闭连接工具后重新进入操作该 .ini 文件时,会提示: E325: ATTENTION Found a swap file by the name &q ...

  6. Linux下监控网卡流量的软件Nload

    Linux下监控网卡流量的软件Nload 安装nload: # wget http://www.roland-riegel.de/nload/nload-0.7.2.tar.gz # tar zxvf ...

  7. node.js入门经典 初读笔记

    2.1 npm是什么 npm(Node Package Manager)是Node.js的包管理器.它允许开发人员在Node.js应用程序中创建.共享并重用模块. 2.3 安装模块 npm insta ...

  8. Prometheus存储模型分析

    Prometheus是时下最为流行的开源监控解决方案,我们可以很轻松地以Prometheus为核心快速构建一套包含监控指标的抓取,存储,查询以及告警的完整监控系统.单个的Prometheus实例就能实 ...

  9. mybatis 动态SQL .1

    MyBatis 的强大特性之一便是它的动态 SQL.如果你有使用 JDBC 或其它类似框架的经验,你就能体会到根据不同条件拼接 SQL 语句的痛苦.例如拼接时要确保不能忘记添加必要的空格,还要注意去掉 ...

  10. python学习之函数（二）

    4.4.6 动态传参 动态传参是针对形参而言 1.动态位置参数 ​ 在静态位置参数时,我们知道,定义函数时有几个位置参数,调用时就必须给几个实参,不能多也不能少.有时候,实际应用过程中,参数往往不能固 ...