缓冲运动

最新推荐文章于 2022-08-05 20:48:39 发布

花开富贵城

最新推荐文章于 2022-08-05 20:48:39 发布

阅读量130

点赞数

分类专栏：运动

本文链接：https://blog.youkuaiyun.com/qq_42498352/article/details/81005971

版权

运动专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 100px;
			height: 100px;
			background: pink;
			position: absolute;
			left: 0px;
			top: 200px;
		}
		span{
			width: 1px;
			height: 300px;
			background: #000000;
			position: absolute;
			left: 300px;
		}
	</style>
	
	<body>
		<input type="button" value="点击" />
		<div id="box"></div>
		<span></span>
	</body>
</html>
<script type="text/javascript">
	var btn = document.querySelector("input");
	var box = document.querySelector("div");
	btn.onclick = function(){
		animate(box,100);
	}
	
	var timer;
	function animate(obj,target){
		clearInterval(timer);
		timer = setInterval(function(){
			var speed = (target - obj.offsetLeft)/10;
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
			if(obj.offsetLeft == target){
				clearInterval(timer);
			}else{
				obj.style.left = obj.offsetLeft + speed + 'px';
			}
		},30)
	}
</script>