js实现盒子的拉伸

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

森林中的小屋

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

阅读量8k

点赞数 1

分类专栏： Web基础 js基础文章标签：移动拉伸盒子 javascript 操作盒子

本文链接：https://blog.csdn.net/xiaowu_hhb/article/details/52809328

版权

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

摘要由CSDN通过智能技术生成

拉伸盒子

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

<!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进行操作。我们先来思考一下，需要如何去实现我们需要达到的要求（点击盒子四周，拖动鼠标将盒子对应的宽高进行改变）。大家想想，我们要拉伸盒子，那么就是改变盒子的宽和高，其中宽和高又是随着鼠标拖动来改变的。则我们就需要把

最低0.47元/天解锁文章

森林中的小屋

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现盒子的拉伸

拉伸盒子前面我们实现了将一个盒子就行移动（拖拽），在这里我们将对盒子本身的大小进行操作，将盒子拉宽或者拉高。首先我们也是布局，给出一个盒子。 *{margin: 0;padding: 0;border: none;} body{padding: 100px;} #box{width: 150px;height: 100px;backgrou
复制链接

扫一扫

专栏目录