原生JavaScript盒子的移动

Ednburgh-

已于 2022-08-02 19:21:46 修改

阅读量1.2k

点赞数 2

文章标签： javascript 前端 html

于 2022-07-13 15:55:37 首次发布

本文链接：https://blog.csdn.net/m0_71345904/article/details/125665515

版权

一，匀速运动

二，缓动动画盒子（移动步长是不断变化的值）

三，作者语录

以后的你，一定会感谢现在不懈努力的自己

一，匀速运动

实现原理：
核心：通过定时器setinterval（）不断移动盒子的位置
步骤：获得盒子当前的位置，通过（盒子的offsetleft）来获取
让盒子在当前位置上加上移动距离
利用定时器不断重复这个操作
加上一个结束定时器的条件
重点：offsetleft只能获取，不能赋值，需要使用styleleft来赋值
多个元素设置，使用函数封装，使用直接调用即可

注意，要操作盒子的移动必须给元素添加定位，用style.left赋值操作，需要加上单位

<style type="text/css">
			*{
				padding:0px;
				margin:0px;
			}
		 .box{
			 width: 200px;
			 height: 200px;
			 background: blue;
			 position: absolute;
			 /* 核心 */
			 left:0px 
		 }
		 .box2{
			 background: red;
			 margin-top: 210px;
		 }
		
		 	
		 </style>
	</head>
	<body>
		<!-- 盒子移动 -->
		<div class="box box1"></div>
		
		<div class="box box2"></div>
		
		<script type="text/javascript">

		var box1=box1=document.querySelector('.box1')
		var myInter=setInterval(function(){
           var offsetLeft=box1.offsetLeft
		   console.log(offsetLeft);
		   var num=10;
		   var target=100;
		   if(offsetLeft==target){
clearInterval(myInter)
		   }else{
         box1.style.left=offsetLeft+num+'px'

		   }

		},500)

QQ录屏20220707195737

二，缓动动画盒子（移动步长是不断变化的值）

思路
让盒子每次移动的距离慢慢变小，速度就会慢慢降下来
核心算法：（目标值-现在的位置）/10，作为每次移动的距离，步长
注意；通过算法，会有小数出现，如果盒子向右移动。我们一般采用向上取整（math.ceil），盒子向左移动，我们一般采用向下取整（floor）
停止的条件，让盒子当前的距离等于目标距离，就停止定时器。

代码实现

<style>
    *{margin: 0;
    padding: 0;}
    div{width: 200px;
        height: 200px;
        background-color: red;
         position:absolute;}
</style>
<body>
    <div>

    </div>
    <script>
      var Div=document.querySelector('div');
     
Div.addEventListener('click',function(){
   
  
    var timer=setInterval(function(){
        var num=Div.offsetLeft
 console.log(num);
var target=500;
var divnum=Math.ceil((target-num)/10);

if(num==target){
    clearInterval(timer)

}else{
    Div.style.left=num+divnum+'px';
}
    },30)
})

    </script>
</body>
</html>

注意，想给盒子设置移动就必须获得他的位置，必须给盒子添加定位！