40、JavaScript的运动----缓冲运动-CSDN博客

本文链接：https://blog.csdn.net/zbw18297786698/article/details/51721805

1、缓冲运动

• 逐渐变慢，最后停止

• 距离越远速度越大

– 速度由距离决定

– 速度 = (目标值 - 当前值 ) / 缩放系数

• 关于小数的取整问题

– Math.ceil(12.52) 向上取整

– Math.floor(8.99) 向下取整

2、缓冲运动的代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			#div1 {
				width: 100px;
				height: 100px;
				position: absolute;
				background: red;
				left: 0;
				top: 50px;
			}
		</style>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		<script type="text/javascript">
			var timer = null;

			function startMove(iTarget) {
				var oDiv = document.getElementById('div1');
				clearInterval(timer);
				timer = setInterval(function() {
					var iSpeed = (iTarget - oDiv.offsetLeft) / 8;
					iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
					/*if(iSpeed>0)
					{
						iSpeed=Math.ceil(iSpeed);
					}
					else
					{
						iSpeed=Math.floor(iSpeed);
					}*/
					if (oDiv.offsetLeft == iTarget) //是否到达终点
					{
						clearInterval(timer); //到达终点
					} else {
						oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px'; //到达之前
					}
					document.title = oDiv.offsetLeft + ',speed=' + iSpeed;
				}, 30);
			}
		</script>
	</head>

	<body>
		<input type="button" value="开始运动" οnclick="startMove(300)" />
		<div id="div1"></div>
		<span style="width:1px; height:300px; background:black; position:absolute; left:300px; top:0;"></span>
	</body>

</html>