基本思路：使用定时器让物体向右运动，在运动的过程中再不是匀速运动，而是先快后慢,即距离越大，速度越快，距离越小，速度越小，可是到达终点的时候，必须注意要使用向上取整函数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. Windows 8 Metro 应用开发入门(一)：开发环境介绍

    摘 要 Windows8已经发布,随之而来的基于WinRT的Metro应用也正向我们走来,正像它所宣传的:光滑.快.现代.看习惯了玻璃.立体风格的应用,或许Metro的简洁能给你留下不一样的体验.Vi ...

  2. 我所遭遇过的游戏中间件---HumanIK

    我所遭遇过的游戏中间件---HumanIK Autodesk HumanIK游戏中间件,为游戏创建更加可信.真实的角色动画.该中间件的全身逆向运动(FBIK)系统支持角色真实地与所在环境及其它角色进行 ...

  3. unity opaque sort

    https://docs.unity3d.com/ScriptReference/Rendering.OpaqueSortMode.html unity对opaque的排序 tbdr下不排序 其它由近 ...

  4. VMware与Cisco DRAC中的virtual disk的对应关系

    笔者面临的问题如下: 笔者有一台Cisco C240的服务器, 其中有十块容量一样大的SAS的local disk, 一块SSD. 其中的两块SAS盘组成了一个RAID 1的virtual drive ...

  5. C/C++语言中变量作用域：局部变量，全局变量，文件级变量

    C/C++语言中的变量分为全局变量和局部变量. 这样的划分方式的根据是变量的可见范围或者叫做作用域. 1 局部变量 局部变量指的是定义在{}中的变量,其作用域也在这个范围内.尽管常见的局部变量都是定义 ...

  6. TJ Holowaychuk是怎样学习编程的？

    TJ Holowaychuk是怎样学习编程的? 学习了:https://blog.csdn.net/wozaixiaoximen/article/details/49507111 Q:TJ Holow ...

  7. python3插入数据

    python3插入数据 insert into table(column....) values('%s','%d') %d也是需要加单引号的:

  8. Andrew Ng Machine Learning 专题【Linear Regression】

    此文是斯坦福大学,机器学习界 superstar - Andrew Ng 所开设的 Coursera 课程:Machine Learning 的课程笔记. 力求简洁,仅代表本人观点,不足之处希望大家探 ...

  9. js 切换隐藏

    先试试 显示\隐藏切换 脚本之家欢迎您 切换隐藏 <style type="text/css"> #thediv { width:200px; height:100px ...

  10. [Algorithm] Radix Sort Algorithm

    For example we have the array like this: [, , , , , ] First step is using Counting sort for last dig ...