加减速运动
速度不断增加或减少
速度减小到负值，会向反方向运动

弹性运动
在目标点左边，加速；在目标点右边，减速
根据距离，计算加速度

带摩擦力的弹性运动
弹性运动+摩擦力

弹性:
速度 += (目标点 - 当前值)/系数;  //6 , 7 , 8
速度 *= 摩擦系数;   // 0.7 0.75
终止条件
距离足够近 并且 速度足够小

缓冲:
var 速度 = (目标点 - 当前值)/系数;
速度取整

 <!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:0;}

 #bg{ width:1px; height:500px; background:black; position:absolute; left:500px; top:0;}

 </style>

 <script>

 //摩擦力 : F = fM

 window.onload = function(){

     var oInput = document.getElementById('input1');

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

     var timer = null;

     var iSpeed = 0;

     oInput.onclick = function(){

         startMove();

     };

     function startMove(){

         clearInterval(timer);

         timer = setInterval(function(){

             /*if( oDiv.offsetLeft < 500 ){

                 iSpeed += (500 - oDiv.offsetLeft)/50;

             }

             else{

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

             }*/

             iSpeed += (500 - oDiv.offsetLeft)/6;

             iSpeed *= 0.75;

             if( Math.abs(iSpeed)<=1 && Math.abs(500 - oDiv.offsetLeft)<=1 ){/*距离足够近 并且 速度足够小*/

                 clearInterval(timer);

                 oDiv.style.left = '500px';

                 iSpeed = 0;

             }

             else{

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

             }

             document.title = oDiv.style.left + ',' + iSpeed;

         },30);

     }

 };

 </script>

 </head>

 <body>

 <input type="button" value="开始运动" id="input1">

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

 <div id="bg"></div>

 </body>

 </html>

JS运动基础(三) 弹性运动的更多相关文章

  1. js基础之弹性运动（四）

    一.滑动菜单.图片 var iSpeed=0;var left=0;function startMove(obj,iTarg){ clearInterval(obj.timer);//记得先关定时器 ...

  2. js运动基础2（运动的封装）

    简单运动的封装 先从最简单的封装开始,慢慢的使其更丰富,更实用. 还是上一篇博文的代码,在此不作细说. 需求:点击按钮,让元素匀速运动. <!DOCTYPE html> <html ...

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

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

  4. JS运动基础(四) 碰撞运动

    碰撞运动撞到目标点,速度反转无重力的漂浮Div速度反转滚动条闪烁的问题过界后直接拉回来 加入重力反转速度的同时,减小速度纵向碰撞,横向速度也减小横向速度小数问题(负数) <!DOCTYPE HT ...

  5. JS运动基础(二) 摩擦运动、缓冲运动

    摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...

  6. [Js]弹性运动

    描述:像弹簧一样左右弹动,最后缓慢停下来 一.加减速运动 1.加速运动 var iSpeed=0;iSpeed++; 速度越来越快,最后冲出去 2.减速运动 var iSpeed=20;iSpeed- ...

  7. Javascript 运动基础 01

    JS运动基础  运动基础   让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快   匀速运动 速度不变 <s ...

  8. js 运动函数篇(二) （加速度运动、弹性运动、重力场运动（多方向+碰撞检测+重力加速度+能量损失运动）拖拽运动）层层深入

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

  9. 第八节 JS运动基础

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

随机推荐

  1. centos6.6编译安装lnmp系列之mysql

    简介: 环境:虚拟机+centos6.6 Mysql版本:5.6.21 Mysql下载地址:http://cdn.mysql.com/archives/mysql-5.6/mysql-5.6.21.t ...

  2. 【转载】详解CreateProcess调用内核创建进程的过程

    原文:详解CreateProcess调用内核创建进程的过程 昨天同学接到了腾讯的电面,有一题问到了CreateProcess创建进程的具体实现过程,他答得不怎么好吧应该是, 为了以防万一,也为了深入学 ...

  3. 用流从一个指定的网址抓取html代码

    package cn.bdqn.collect.test; import java.io.BufferedReader; import java.io.InputStream; import java ...

  4. vi/vim基本使用方法

    vi/vim 基本使用方法本文介绍了vi (vim)的基本使用方法,但对于普通用户来说基本上够了!i/vim的区别简单点来说,它们都是多模式编辑器,不同的是vim 是vi的升级版本,它不仅兼容vi的所 ...

  5. 自定义datagridview列,却提示DataGridView 控件中至少有一列没有单元格模板

    哈哈,一个小误区,你看看设计窗体生成的代码,DataGridView的列不是GridViewColumn 而是DataGridViewTextBoxColumn你只要添加这个类型的对象就可以了,我也是 ...

  6. MFC编程入门之八（对话框：创建对话框类和添加控件变量）

    创建好对话框资源后要做的就是生成对话框类了.生成对话框类主要包括新建对话框类.添加控件变量和控件的消息处理函数. 例程Addition是基于对话框的程序,所以程序自动创建了对话框模板IDD_ADDIT ...

  7. nginx location配置

    nginx location配置   location在nginx中起着重要作用,对nginx接收到的请求字符串进行处理,如地址定向.数据缓存.应答控制.代理转发等location语法location ...

  8. C学习笔记（八）字符输入输出和输入确认

    缓冲区 缓冲区分为两类:完全缓冲(fully buffered)I/O和行缓冲(line-buffered)I/O.完全缓冲在缓冲区满时被清空(内容被发送至目的地).这种类型常出现在文件输入中.缓冲区 ...

  9. 004_kafka_安装运行

    1.下载和安装 目前kafka的稳定版本为0.10.0.0 下载地址:http://kafka.apache.org/downloads.html 下载后解压缩安装包到系统即可完成安装 > ta ...

  10. 51nod 1134 最长递增子序列

    题目链接:51nod 1134 最长递增子序列 #include<cstdio> #include<cstring> #include<algorithm> usi ...