js实现盒子的拉伸

这篇博客详细介绍了如何使用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>




















评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值