JavaScript实现矩形块大小任意缩放

最近写了一个原生Javascript实现矩形块大小任意缩放的案例，感觉里面的东西比较的绕，这里分享源码给大家，一起学习一下。

 
 
 


 * {
  margin: 0;
  padding: 0;
 }

 .box {
  position: relative;
  top: 200px;
  left: 500px;
  width: 500px;
  height: 300px;
  background-color: blueviolet;
 }

 .box>div:nth-child(-n+4) {
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: #cc00ff;
 }

 .box>div:nth-child(n+5) {
  position: absolute;
  background-color: #f30497;
 }

 .box>.dot1 {
  cursor: nw-resize;
  top: -5px;
  left: -5px;
 }

 .box>.dot2 {
  cursor: ne-resize;
  top: -5px;
  right: -5px;
 }

 .box>.dot3 {
  cursor: se-resize;
  bottom: -5px;
  right: -5px;
 }

 .box>.dot4 {
  cursor: sw-resize;
  bottom: -5px;
  left: -5px;
 }

 .box>.line1,
 .box>.line3 {
  width: 500px;
  height: 5px;
 }

 .box>.line1 {
  top: -5px;
  cursor: n-resize;
 }

 .box>.line3 {
  bottom: -5px;
  cursor: s-resize;
 }

 .box>.line2,
 .box>.line4 {
  width: 5px;
  height: 300px;
 }

 .box>.line2 {
  right: -5px;
  cursor: e-resize;
 }

 .box>.line4 {
  left: -5px;
  cursor: e-resize;
 }



 
  
  
  
  
  
  
  
  
 
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。