拉伸盒子
前面我们实现了将一个盒子就行移动(拖拽),在这里我们将对盒子本身的大小进行操作,将盒子拉宽或者拉高。首先我们也是布局,给出一个盒子。
<!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进行操作。我们先来思考一下,需要如何去实现我们需要达到的要求(点击盒子四周,拖动鼠标将盒子对应的宽高进行改变)。大家想想,我们要拉伸盒子,那么就是改变盒子的宽和高,其中宽和高又是随着鼠标拖动来改变的。则我们就需要把