js运动--缓冲运动

马晨宇

于 2019-05-31 09:25:41 发布

阅读量172

点赞数

分类专栏： web前端小白 js

本文链接：https://blog.youkuaiyun.com/mcyhero/article/details/90710443

版权

web前端小白同时被 2 个专栏收录

19 篇文章

订阅专栏

16 篇文章

订阅专栏

博客围绕JS缓冲运动展开，虽未给出具体内容，但可知聚焦于JavaScript中的缓冲运动相关知识，这在前端动画效果实现等方面有重要应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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)
	 }