40、JavaScript的运动----缓冲运动

曾经终败给现在 2022-09-21 13:07 269阅读 0赞

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>