js运动--缓冲运动

马晨宇

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

阅读量146

点赞数

分类专栏： web前端小白 js

本文链接：https://blog.csdn.net/mcyhero/article/details/90710443

版权

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

19 篇文章 2 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

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

马晨宇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js运动--缓冲运动

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #box{ height: 100px; width: 100px; background: red; po...
复制链接

扫一扫