基本思路：使用定时器让物体向右运动，在运动的过程中再不是匀速运动，而是先快后慢,即距离越大，速度越快，距离越小，速度越小，可是到达终点的时候，必须注意要使用向上取整函数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. Selenium2+python自动化33-文件上传（send_keys）

    前言 文件上传是web页面上很常见的一个功能,自动化成功中操作起来却不是那么简单. 一般分两个场景:一种是input标签,这种可以用selenium提供的send_keys()方法轻松解决: 另外一种 ...

  2. TQ2440实现触摸屏和qt图形 解决segmentation fault

    使用触摸屏,首先安装触摸屏矫正程序. 下载并解压tslib-1.4,进入主文件夹,运行: 1 [root@localhost ~]#./autogen.sh 2 [root@localhost ~]# ...

  3. MATLAB 人脸定位

    faceimg = x222;faceDetector = vision.CascadeObjectDetector();bbox = step(faceDetector, faceimg);face ...

  4. 最值得你所关注的10个C语言开源项目

    . Webbench Webbench是一个在linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的性能,最多可以模拟3万个并发连接 ...

  5. [转贴]SSL工作原理

    SSL协议使用不对称加密技术实现会话双方之间信息的安全传递.可以实现信息传递的保密性.完整性,并且会话双方能鉴别对方身份.不同于常用的http协议,我们在与网站建立SSL安全连接时使用https协议, ...

  6. PHP PSR基本代码规范(中文版)

    PSR-1 基本代码规范 本篇规范制定了代码基本元素的相关标准,以确保共享的PHP代码间具有较高程度的技术互通性. 关键词 “必须”("MUST").“一定不可/一定不能”(&qu ...

  7. 在 Linux 中永久修改 USB 设备权限

    问题 当我尝试在 Linux 中运行 USB GPS 接收器时我遇到了下面来自 gpsd 的错误.看上去 gpsd 没有权限访问 USB 设备(/dev/ttyUSB0).我该如何永久修改它在Linu ...

  8. nodejs自动热加载文件的做法

    https://stackoverflow.com/questions/1972242/how-to-auto-reload-files-in-node-js -------------------- ...

  9. VS2010 配置PCL1.6.0AII in one 无法启动程序ALL_BUILD

    无法启动程序D:\build\debug\ALL_BUILD 系统找不到指定文件 解决办法:将project_inliers工程设置为启动项目    找到项目右击--设为启动项目. 将project_ ...

  10. Shell程序荟萃

    --------------纯输出----------------1.sh #!/bin/sh echo -e "Hello!world!\a\n"exit 0 --------- ...