JavaScript盒子移动_活动盒子js-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_59359854/article/details/125625855

本文详细介绍了如何使用JavaScript实现盒子元素的动态移动效果，包括通过改变CSS属性实现平滑过渡，以及结合事件监听实现用户交互式的盒子移动。内容涵盖DOM操作、CSS3动画和JavaScript基础，适合前端开发者提升动态效果实现技巧。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<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 = document.querySelector('.box1');
			var box2 = document.querySelector('.box2');
			
			//匀速运动  分装上面的代码块设计一个匀速运动的函数
			function move(obj,target){
				 obj.myInter = setInterval(function(){
					var offsetLeft = obj.offsetLeft;
					// console.log(offsetLeft);
					var num = 10;//每次都移动10个像素
					// var target = 100;
					if(offsetLeft==target){
						//清除定时器
						clearInterval(obj.myInter);
					}else{
						obj.style.left = offsetLeft+num+'px';
					}
					
				},1000)
			}
			
			box1.onclick = function(){
				move(this,100);
			}
			
			// 缓动运动 有个滑动效果 每次移动的距离 由大到小改变
			// 思路  要移动100  可以先走40 再走30 再走20 再走10 这样移动就会越来越慢
			function slow(obj,target){
				obj.myInter = setInterval(function(){
					var  offsetLeft = obj.offsetLeft;
					var num = (target-offsetLeft)/10;
					// Math.ceil向上取整 Math.floor向下取整
					num>0?num = Math.ceil(num):num=Math.floor(num);
					//注意 随着定时器的运行 num数值会由大到小发生变化
					// 因为offsetLeft的值在变大
					if(offsetLeft==target){
						clearInterval(obj.myInter);//清除定时器
					}else{
						obj.style.left = offsetLeft+num+'px';
					}
				},1000)
			}
			box2.onclick = function(){
				slow(this,100);
			}
		</script>
		
	</body>
</html>