js实现盒子的拉伸

最新推荐文章于 2023-06-01 14:35:52 发布

原创最新推荐文章于 2023-06-01 14:35:52 发布 · 8.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#移动 #拉伸盒子 #javascript #操作盒子

Web基础同时被 2 个专栏收录

18 篇文章

订阅专栏

js基础

11 篇文章

订阅专栏

这篇博客详细介绍了如何使用JavaScript实现盒子的拉伸功能。通过监听鼠标事件，获取鼠标移动时的距离值，根据不同的拉伸方向调整盒子的大小。在处理过程中，特别提到了在拉伸盒子上边和左边时遇到的bug，并提出了解决方案，即通过改变盒子的位置来模拟拉伸效果。最后，给出了实现拉伸功能的JavaScript代码。

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

拉伸盒子

前面我们实现了将一个盒子就行移动（拖拽），在这里我们将对盒子本身的大小进行操作，将盒子拉宽或者拉高。首先我们也是布局，给出一个盒子。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;border: none;}
			body{padding: 100px;}
			#box{width: 150px;height: 100px;background: cornflowerblue;border: 5px solid blueviolet;position: absolute;}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

接下来我们对js进行操作。我们先来思考一下，需要如何去实现我们需要达到的要求（点击盒子四周，拖动鼠标将盒子对应的宽高进行改变）。大家想想，我们要拉伸盒子，那么就是改变盒子的宽和高，其中宽和高又是随着鼠标拖动来改变的。则我们就需要把鼠标拖动的距离给计算出来，在加上盒子原本的宽和高，这不就是改变了盒子的宽度和高度吗。

那我们需要如何去拿到改变的距离值呢？我们鼠标点击的时候可以获取到当前指针的坐标值（根具鼠标事件onmousedown中clientX和clientY），在指针移动（拉伸盒子）过程的时候，我们也是可以拿到的（根具鼠标事件onmousemove中clientX和clientY），在这里我们需要停顿一下，因为你指针移动有四个方向，所以在计算距离的时候会出现大小不同，需要注意。拿到这个距离之后，那么就可以对盒子就行操作了。

是不是发现我们其中存在一些bug，这样我们在拉伸盒子的时候，拉右边和下面都是没有问题的。但是拉上边和左边就存在和理想中的状态不一样的画面了。我们改变一个盒子的大小，其默认都是网右边和下面改变的，我们要想让盒子可以往上和左拉伸，那么我们为何不换个想法呢？我们在操作左边的时候，盒子是向右边变化的，那么我们可以想成盒子拉伸已经成功，就是方向不对，如果我们把盒子往左边移动（移动距离就是拉伸的距离），那么看起来不就是把盒子往左边拉伸的吗。看下面示意图所示：

上面黄色为原本的盒子，右边淡紫色为拉伸的盒子，其中两个黑点为指针位置，左边为点击位置（坐标绿色），右边为移动后的位置（坐标红色）。那么移动得距离就为红色坐标（clientX） - 绿色坐标（clientX），那么现在盒子总共的宽度就是其本身宽度（oBox.offsetWidth）加上前面坐标之差。

向左拉伸原理差不多，就是多加个改变盒子的位置。我们对盒子就行绝对定位，获取它的left值，将它left值减去改变的距离，他就会向左边拉伸了。

上面说的都是向左右拉伸，向上和向下拉伸和向左向右原理一样，这里就不多说了。js代码如下：

		<script type="text/javascript">
			window.onload=function  () {
				var oBox = document.getElementById('box');
				var a=0;b=0;
				
				oBox.onmousedown=function  (ev) {
					var oEvent = ev || event;
					var X=oEvent.clientX;
					var Y=oEvent.clientY;
					var oBoxW=oBox.offsetWidth;
					var oBoxH=oBox.offsetHeight;
					var oBoxL=oBox.offsetLeft;
					
					if (X<(oBox.offsetLeft+5)) {
						a='left';
					}else if (X>(oBox.offsetLeft+oBox.offsetWidth-5)) {	
						a='right';
					}
					if (Y<(oBox.offsetTop+5)) {
						a='top';
					}else if (Y>(oBox.offsetTop+oBoxH-5)) {
						a='bottom';
					}
					document.onmousemove=function  (ev) {
						var oEvent = ev || event;
						var XX=oEvent.clientX;
						var YY=oEvent.clientY;
						
						if (a=='right') {
							oBox.style.width=oBoxW+(XX-X)+'px';
						}	
						else if (a=='left') {
							oBox.style.width=oBoxW+(X-XX)+'px';
							oBox.style.left=XX-X+oBoxL-5+'px';
						}
						if (a=='top') {
							oBox.style.height=oBoxH+(Y-YY)+'px';
							oBox.style.top=YY+'px';
						}
						else if (a=='bottom') {
							oBox.style.height=oBoxH+(YY-Y)+'px';
						}
					};
					document.onmouseup=function  () {
						document.onmousedown=null;
						document.onmousemove=null;
					};
					
				};
				
			};
		</script>