缓冲运动

　　逐渐变慢，最后停止

　　距离越远速度越大

　　　  速度由距离决定

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

　 存在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. Static class 与non static class的区别

    内部静态类不需要有指向外部类的引用.但非静态内部类需要持有对外部类的引用.非静态内部类能够访问外部类的静态和非静态成员.静态类不能访问外部类的非静态成员.他只能访问外部类的静态成员.一个非静态内部类不 ...

  2. [NLP] 语义网络与知识图谱入门（二）

    语义网络与知识图谱入门(二) OWL 本体声明 owl用owl:Ontology来声明一个本体.rdf:about属性为本体提供一个名称或引用.根据标准,当rdf:about属性的值为"&q ...

  3. HOG + SVM(行人检测, opencv实现)

    HOG+SVM流程 1.提取HOG特征 灰度化 + Gamma变换(进行根号求解) 计算梯度map(计算梯度) 图像划分成小的cell,统计每个cell梯度直方图 多个cell组成一个block, 特 ...

  4. golang reflect 简单使用举例

    golang中的多态,主要由接口interface体现. 接口interface在实现上,包括两部分:动态类型和动态值. golang提供的reflect包可以用来查看这两部分. 动态类型 func ...

  5. jenkins docker 发布

    分享下怎么使用jenkins 发布 docker   首先准备docker的相关部分 docker tomcat基础镜像,这边使用centos7做系统,dockerfile如下: #tomcat基础镜 ...

  6. linux(centOS7)的基本操作(六) 进程管理

    进程的概念 1. 在linux系统中,每一段执行的程序都称为一个进程,被分配一个进程编号(id). 2. 每个进程都对应一个父进程,一个父进程可以复制多个子进程. 3. 一个进程可能以两种方式存在:前 ...

  7. jqGrid细节备注—jqGrid中自定义格式，URL格式

    本文来自:http://cnn237111.blog.51cto.com/2359144/782137 jqGrid中自定义格式,URL格式 当官方自带的showlink用起来不是十分顺手,因此可以考 ...

  8. Appium+python--元素定位uiautomatorviewer

    一.启动uiautomatorviewer.bat 1. 打开uiautomatorviewer软件,如下图所示,本机路径:E:\downloads\android-sdk_r23.0.2-windo ...

  9. 阶段3 2.Spring_06.Spring的新注解_5 spring的新注解-PropertySource

    数据库的链接 次数是写死的 新建配置文件 定义成员变量 value注解实现 与配置文件的key对应 PropertySource 要想让spring去读取这个配置文件 resource编译后都跑到了. ...

  10. sorted&filter&map

    python里列表的sort和内置的sorted函数,都可以进行排序,列表的sort方法是在原有的列表上进行排序,sorted是会返回一个新的对象 persons = [ {'name': '小明', ...