摩擦运动：

逐渐变慢，最后停止

缓冲运动：

与摩擦力的区别:可以精确的停到指定目标点
距离越远速度越大
速度由距离决定
速度=(目标值-当前值)/缩放系数
Bug：速度取整
值取整：

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

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <style>

 #div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px;}

 </style>

 <script>

 //摩擦，减速 : 在运动过程中，速度越来越慢

 //愈接近目标点，速度就越小

 window.onload = function() {

     var oBtn = document.getElementById('btn');

     var oDiv = document.getElementById('div1');

     var iTimer = null;

     oBtn.onclick = function() {

         clearInterval(iTimer);

         var iSpeed = 0;

         iTimer = setInterval(function() {

             iSpeed = (500 - oDiv.offsetLeft) / 8;

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

             console.log( oDiv.offsetLeft + ' : ' + iSpeed );

             if (oDiv.offsetLeft == 500) {

                 clearInterval(iTimer);

             } else {

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

             }

         }, 30);

     }

 }

 </script>

 </head>

 <body>

     <input type="button" value="动起来" id="btn" />

     <div id="div1"></div>

 </body>

 </html>

JS运动基础(二) 摩擦运动、缓冲运动的更多相关文章

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

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

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

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

  3. JS错误记录 - 右侧悬浮框 - 缓冲运动

    本次练习错误总结: 1.  正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...

  4. 第八节 JS运动基础

    运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...

  5. js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  6. day39—JavaScript缓冲运动

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

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

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

  8. 学习blus老师js(6)--js运动基础

    运动基础 一.匀速运动 运动框架 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE HTML> <html> <head> &l ...

  9. JS运动基础(三) 弹性运动

    加减速运动速度不断增加或减少速度减小到负值,会向反方向运动 弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度 带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前 ...

随机推荐

  1. easyui dialog 扩展load

    $.extend($.fn.panel.methods, { showMask: function(jq, msg){ return jq.each(function(){ var pal = $(t ...

  2. Pet Shop4.0

    http://blog.csdn.net/RainyLin/article/details/1769947

  3. SQL SA密码丢失

    ------------记不清了,以下似乎是这样操作的-----NET STOP MSSQLSERVER Net Start MSSQLServer /m"SQLCMD" 安装并使 ...

  4. 車(rook)

    [题目分析] JustPenz:我们假设n>m(不大于就交换),那最多能摆m个,所以会有(n-m)个空白,我们把这些空白插入到n中,答案就是C(n,n-m)=C(n,m);数据范围比较大,我们就 ...

  5. 思科Cisco 2960系列交换机配置命令

    配置密码: 2960>en :第一次密码为空 2960h#conf t :进入全局配置模式 2960(config)#hostname swa :设置交换机名 2960(config)#enab ...

  6. Number To Indian Rupee Words in Oracle Forms / Reports

    Convert numbers to Indian Rupees format in Oracle Forms / Reports.Create the below mention function ...

  7. 《BI项目笔记》数据源视图设置

    目的数据源视图是物理源数据库和分析维度与多维数据集之间的逻辑数据模型.在创建数据源视图时,需要在源数据库中指定包含创建维度和多维数据集所需要的数据表格和视图.BIDS与数据库连接,读取表格和视图定义, ...

  8. 打造高大上的Canvas粒子(一)

    HTML5 Canvas <canvas>标签定义图形,比如图表和其他图像,必须用脚本(javascript)绘制图形. 举例:绘制矩形 <script> var c = do ...

  9. attr和prop

    <div class="content-item active"> <table class="table"> <thead> ...

  10. /proc/stat文件详解（翻译）

    原文地址:http://www.linuxhowtos.org/System/procstat.htm 各种关于系统内核的活动信息都可以在/proc/stat文件中找到,该文件记录了自系统第一次启动以 ...