基本思路：使用定时器让物体向右运动，在运动的过程中再不是匀速运动，而是先快后慢,即距离越大，速度越快，距离越小，速度越小，可是到达终点的时候，必须注意要使用向上取整函数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核心编程》第九章——用内核对象进行线程同步

    先举一个有bug的例子: #include <iostream> #include <windows.h> #include <process.h> using n ...

  2. Ceph rgws客户端验证

    修改/etc/ceph/ceph.conf文件,加入rados gw监听的端口 [client.rgw.rgws] rgw_frontends = "civetweb port=80&quo ...

  3. python文章学习列表

    1.https://home.cnblogs.com/u/darkpig/feed/blog/ 这篇博主的系列文章 2.

  4. Guava 源码分析之 Beta, GwtCompatible, GwtIncompatible, Charset, HashCode

    com.google.common.annotations.Beta /** * 表明一个公用API的未来版本是受不兼容变更或删除限制的 * 拥有这个注释标志的API不受任何兼容性保证 * */ @R ...

  5. nth-digit

    https://leetcode.com/problems/nth-digit/ public class Solution { public int findNthDigit(int n) { in ...

  6. 上下变换中 aspect的选择

    在电视制作还没有完全整转到高清之前,有很多原来的SD素材需要转到HD信号进入高清切换或者编辑平台,电视台是电视节目的发射源端 ,所以上变换过程不能引入额外的噪声或者失真: 上变换使用的方式一般有4种: ...

  7. Entity Framework泛型封装

    Entity Framework本身的增删改查其实 已经很方便了,不过做项目的时候用的多了也就觉得有点累了,每个业务实体基本上都涉及到到了增删改查这四个基本的要素,至于封装每个公司可能都不一样,接口, ...

  8. NSURLSession下载和断点续传

    NSURLSession是iOS7之后新的网络接口,和经常用到NSURLConnection是类似的.在程序在前台时,NSURLSession与NSURLConnection可以相互的替代.但是当用户 ...

  9. Android实现图片轮显效果——自定义ViewPager控件

    一.问题概述 使用ViewPager控件实现可横向翻页.水平切换图片等效果,但ViewPager需要手动滑动才能切换页面,图片轮显效果的效果本质上就是在ViewPager控件的基础上让它能自动的进行切 ...

  10. Oracle Agile PLM Web Services 的实现

    Oracle 的产品Agile PLM内置了许多Web Services,其他系统可以通过Web Servcies实现对Agile PLM系统资源的访问.快速学会使用的方法,是去Oracle的官网下载 ...