基本思路：使用定时器让物体向右运动，在运动的过程中再不是匀速运动，而是先快后慢,即距离越大，速度越快，距离越小，速度越小，可是到达终点的时候，必须注意要使用向上取整函数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. Tomcat报BAD packet signature 18245错误的原因

    今天在启动服务器时,报了一个BAD packet signature 18245错误 详细错误如下: 2009-6-5 11:09:11 org.apache.jk.common.MsgAjp pro ...

  2. coursera课程Text Retrieval and Search Engines之Week 1 Overview

    Week 1 OverviewHelp Center Week 1 On this page: Instructional Activities Time Goals and Objectives K ...

  3. C语言编译器不检查数组下标越界

    这两天被人问了一个问题说假如C/C++访问下表越界的数组元素会报错么,于是充满好奇心的我动手试了一下,WTF,果然没有报错,但是会给程序带来莫名其妙的结果(比如十次的循环但是变成了死循环,但八次却可以 ...

  4. Observer 观察者模式 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  5. python3 把excel文件合并并保存到csv文件

    具体是这样,某路径下有很多 excel文件,文件名中包含相同关键字的是一类文件,把包含相同关键字的文件合并成一个文件,生成一个新的csv文件 # coding=utf-8 import xlrd im ...

  6. OpenProcess、GetExitCodeProcess、TerminateProcess

    //声明: {返回进程的句柄} OpenProcess(   dwDesiredAccess: DWORD;  {訪问选项}   bInheritHandle: BOOL;    {是否能继承; Tr ...

  7. .NET/Mysql-petatoco连接mysql数据库

    安装mysql数据库 用nugget添加.net连接mysql数据库的组件

  8. matlab使用常犯的错误

    总是在最后关掉的时候忘了保存工作空间 save... 我用的版本R2013a 每次要setpath...!!!!!!!!!!

  9. leetcode第一刷_Integer to Roman

    这道题当时不会写,是參照discuss写的. 首先要弄明确罗马数字的规则,这个在国外难道是常识吗.为什么题干一点都没讲.. 4000以下一共同拥有以下几种符号:"M", " ...

  10. unity3d插件Daikon Forge GUI 中文教程-3-基础控件Button和Sprite的使用

    (游戏蛮牛首发)大家好我是孙广东.官网提供了专业的视频教程http://www.daikonforge.com/dfgui/tutorials/,只是是在youtube上.要观看是须要FQ的. 只是教 ...