js运动--缓冲运动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				height: 100px;
				width: 100px;
				background: red;
				position: absolute;
				top: 200px;
			}
		</style>
	</head>
	<body>
		<button onclick="boxmove(600)">起飞</button>
		<div id="box"></div>
	</body>
</html>
  let box =document.getElementById("box");
	 let time = null;
	 function boxmove(a){
		 clearInterval(time);
		 time = setInterval(function(){
			 let jia = (a-box.offsetLeft)/20;
	         jia =  jia>0 ? Math.ceil(jia) : Math.floor(jia);
			 box.style.left = box.offsetLeft + jia +"px";
			 if(box.offsetLeft>=a){
				 clearInterval(time);
			 }
		 },50)
	 }

 

上一篇:关于小程序仿微博导航效果(前端网备份 )


下一篇:滑动的导航条