基本思路：使用定时器让物体向右运动，在运动的过程中再不是匀速运动，而是先快后慢,即距离越大，速度越快，距离越小，速度越小，可是到达终点的时候，必须注意要使用向上取整函数Math.ceil()和向下取整函数Math.floor();这样才可以正确无误地到达终点，而不是有出入。

<!DOCTYPE HTML>

<!--

-->

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

#div1{

	width:100px;

	height:100px;

	background:red;

	position:absolute;

	left:0px;//left:600px;

	top:50px;

}

#div2{

	width:1px;

	height:300px;

	background:red;

	position:absolute;

	left:300px;

	top:0px;

	background:black;

}

</style>

<script>

function startMove(){

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

	setInterval(function(){

		var speed=(300-oDiv.offsetLeft)/10;

		speed=speed>0?Math.ceil(speed):Math.floor(speed);//向上取整

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

		document.title=oDiv.offsetLeft+','+speed;

	},30);

}

</script>

</head>

<body>

   <input type="button" value="開始运动" onclick="startMove()"/>

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

   <div id="div2">/<div>

</body>

</html>

效果图：

初始状态，分别从左出发和从右出发：

没取整导致有出入的情况，title表示终点位置和速度大小：

取整没误差情况：

（39）JS运动之缓冲运动的更多相关文章

  1. js动画之缓冲运动

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

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

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

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

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

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

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

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

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

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

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

  7. DOM+position:relative+缓冲运动

    一.nodeType节点类型 nodeType==3  ->文本节点 nodeType==1  ->元素节点 for(var i=0;i<oUl.childNodes.length; ...

  8. day39—JavaScript缓冲运动

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

  9. js实现缓冲运动，和匀速运动有点不相同

    缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...

随机推荐

  1. 如何让access空值变成0？（确切的说是让access Null值变成0）

    方法一 if  IsNull(Me.新_退休费) = True Then Me.新_退休费 = 0 方法二 if Nz(Me.原_退休费) = Me.原_退休费 Then Me.原_退休费 = 0 有 ...

  2. 【java】将字符串的首字母大写

    工具方法: public static void main(String[] args) { System.out.println(upperCaseFirst("barer")) ...

  3. 演示Microsoft Advertising SDK for Windows Phone 8.1

    演示Microsoft Advertising SDK for Windows Phone 8.1,Only for Windows Phone 8.1 1.在References上点右键,添加引用, ...

  4. dom4j怎么获得指定名称的节点信息

    <?xml version="1.0" encoding="utf-8" ?> <MgUtil> <db_config> & ...

  5. csv2txt.cpp

    #include <iostream> #include <fstream.h> #include <windows.h> #include <iomanip ...

  6. strstr实现

    // strstr.c查找完全匹配的子字符串 #include<stdio.h> #include<string.h> char *my_strstr(const char * ...

  7. 学习笔记：A*算法

    简易地图 如图所示简易地图, 其中绿色方块的是起点 (用 A 表示), 中间蓝色的是障碍物, 红色的方块 (用 B 表示) 是目的地. 为了可以用一个二维数组来表示地图, 我们将地图划分成一个个的小方 ...

  8. 正则表达式和grep

    本章主要通过一些应用实例,来对正则表达式进行说明. 1.正则表达式 正则表达式就是字符串的表达式.它能通过具有意义的特殊符号表示一列或多列字符串.grep是linux系统下常用的正则表达式工具,可以使 ...

  9. linux下永久添加静态路由

    在linux下永久添加静态路由有两种方法: 添加路由的命令: 1,route add route add -net 192.56.76.0 netmask 255.255.255.0 dev eth0 ...

  10. Android数据存储之SQLite

    SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品中使用了它,占用资源非常少,只有几百KB内存.支持Windows/Linux ...