（39）JS运动之缓冲运动

最新推荐文章于 2020-05-21 10:01:04 发布

无人与我共黄昏

最新推荐文章于 2020-05-21 10:01:04 发布

阅读量1.5k

点赞数 1

分类专栏： JavaScript案例解析

本文链接：https://blog.csdn.net/xuan6251237011/article/details/38053295

版权

JavaScript案例解析同时被 3 个专栏收录

42 篇文章 0 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

JavaScript代码

42 篇文章 0 订阅

订阅专栏

JavaScript

24 篇文章 0 订阅

订阅专栏

本文介绍了如何在JavaScript中实现缓冲运动效果，通过定时器控制物体的非匀速运动，使其在接近终点时速度减缓。关键在于正确使用Math.ceil()和Math.floor()函数确保物体准确到达终点。

摘要由CSDN通过智能技术生成

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