缓冲运动 //缓冲运动 (目标值 - 当前值)/10

最新推荐文章于 2022-05-03 19:40:10 发布

YOUAFR

最新推荐文章于 2022-05-03 19:40:10 发布

阅读量283

点赞数

本文链接：https://blog.csdn.net/YOUAFR/article/details/78277304

版权

<style type="text/css">
			#box{
				width: 200px;
				height: 200px;
				background: pink;
				position: absolute;
				left: 0;
			}
		</style>
	</head>
	<body>
		<input type="button" name="btn1" id="btn1" value="anniu" />
		<div id="box"></div>
	</body>

<script type="text/javascript">
			window.onload = function(){
				var oBox = document.getElementById('box');
				var oBtn = document.getElementById('btn1');
				var timer = null;
				
				function move(){
					clearInterval(timer);
					timer = setInterval(function(){
						//缓冲运动 (目标值 - 当前值)/10
						var speed = (300 - oBox.offsetLeft)/10;
						
						//判断speed的值是不是需要往上还是往下取整
						//speed=speed>0?Math.ceil(speed):Math.floor(speed);  //三目运算符  
						if(speed>0){
							//Math.ceil(); 小数点后一位 向上取整
							speed = Math.ceil(speed);
						}else{
							//Math.floor(); 小数点后一位 向下取整
							//例子：-0.5 向下取整就是 -1
							speed = Math.floor(speed);
						}
						oBox.style.left = oBox.offsetLeft + speed +'px';
					},30)
				}
				oBtn.onclick = function(){
					move();
				}
			}
		</script>