编程 Javascript

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

Posted in Javascript onAugust 25, 2020

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

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>原生JavaScript实现矩形块大小任意缩放</title>
</head>
<style>
 * {
  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;
 }
</style>

<body>
 <div class="box">
  <div class="dot1"></div>
  <div class="dot2"></div>
  <div class="dot3"></div>
  <div class="dot4"></div>
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
  <div class="line4"></div>
 </div>
 <script>
  //获取相关元素节点
  let box = document.querySelector(".box");
  let dots = document.querySelectorAll(".box>div:nth-child(-n+4)");
  let lines = document.querySelectorAll(".box>div:nth-child(n+5)");
  // 类边框宽度
  let bd = 5;
  //for循环指定事件对象
  function changeBox([box, dots, lines, bd]) {
   for (let i = 0; i < 4; i++) {
    let { 0: dot1, 1: dot2, 2: dot3, 3: dot4 } = dots;  //dots对象解构
    let { 0: line1, 1: line2, 2: line3, 3: line4 } = lines;  //lines对象解构
    //矩形顶点点击拖动调整大小
    dots[i].onmousedown = function (ev) {
     //点击事件初始化相关值
     let oldY = ev.clientY;  //顶点原本的y值
     let oldX = ev.clientX;  //顶点原本的x值
     let h = box.clientHeight; //box的高度
     let w = box.clientWidth; //box的宽度
     let t = box.offsetTop;  //box距离顶部的top值
     let l = box.offsetLeft;  //box距离左边的left值
     window.onmousemove = function (e) {
      let offsetY = e.clientY - oldY;   //鼠标移动y轴偏移量
      let offsetX = e.clientX - oldX;   //鼠标移动x轴偏移量
      //if条件是判断鼠标点击的节点目标对象
      if (i == 0) {
       box.style.height = `${h - offsetY + bd}px`;  //box高度变化
       box.style.top = `${t + offsetY - bd}px`;  //box的top值变化(定位)
       box.style.width = `${w - offsetX + bd}px`;  //box的宽度变化
       box.style.left = `${l + offsetX - bd}px`;  //box的left值变化(定位)
      } else if (i == 1) {
       box.style.height = `${h - offsetY + bd}px`;
       box.style.top = `${t + offsetY - bd}px`;
       box.style.width = `${w + offsetX + bd}px`;
      } else if (i == 2) {
       box.style.height = `${h + offsetY + bd}px`;
       box.style.width = `${w + offsetX + bd}px`;
      } else if (i == 3) {
       box.style.height = `${h + offsetY + bd}px`;
       box.style.width = `${w - offsetX + bd}px`;
       box.style.left = `${l + offsetX - bd}px`;
      }
      //边框线的高度/宽度随着box的大小变化而变化
      line1.style.width = box.style.width;
      line2.style.height = box.style.height;
      line3.style.width = box.style.width;
      line4.style.height = box.style.height;
     }
    }
    //边框点击拖动调整大小
    lines[i].onmousedown = function (ev) {
     //点击事件初始化相关值
     let oldY = ev.clientY;   //顶点原本的y值   
     let oldX = ev.clientX;   //顶点原本的x值
     let h = box.clientHeight;  //box的高度
     let w = box.clientWidth;  //box的宽度
     let t = box.offsetTop;   //box距离顶部的top值
     let l = box.offsetLeft;   //box距离左边的left值
     window.onmousemove = function (e) {
      let offsetX = e.clientX - oldX;  //鼠标移动x轴偏移量
      let offsetY = e.clientY - oldY;  //鼠标移动y轴偏移量
      //if条件是判断鼠标点击的节点目标对象
      if (i == 0) {
       box.style.height = `${h - offsetY + bd}px`;
       box.style.top = `${t + offsetY - bd}px`;
      } else if (i == 1) {
       box.style.width = `${w + offsetX + bd}px`;
      } else if (i == 2) {
       box.style.height = `${h + offsetY + bd}px`;
      } else {
       box.style.width = `${w - offsetX + bd}px`;
       box.style.left = `${l + offsetX - bd}px`;
      }
      //边框线的高度/宽度随着box的大小变化而变化
      line1.style.width = box.style.width;
      line2.style.height = box.style.height;
      line3.style.width = box.style.width;
      line4.style.height = box.style.height;
     }
    }
    //鼠标抬起后清除鼠标移动事件
    window.onmouseup = function () {
     window.onmousemove = false;
    }
   }
  }
  changeBox([box, dots, lines, bd])
 </script>
</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

- Author -

布湫

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 最常用的10个自定义函数[推荐]

Dec 26 Javascript

关于jQuery $.isNumeric vs. $.isNaN vs. isNaN

Apr 15 Javascript

js猜数字小游戏的简单实现代码

Jul 02 Javascript

常见浏览器多长时间会提示“脚本运行时间过长”总结

Apr 29 Javascript

javascript常用代码段搜集

Dec 04 Javascript

Javascript动态创建div的方法

Feb 09 Javascript

js原生实现FastClick事件的实例

Nov 20 Javascript

如何在Angular.JS中接收并下载PDF

Nov 26 Javascript

详解angularjs结合pagination插件实现分页功能

Feb 10 Javascript

Vue.js对象转换实例

Jun 07 Javascript

Vue Prop属性功能与用法实例详解

Feb 23 Javascript

ionic2.0双击返回键退出应用

Sep 17 Javascript

VSCode插件安装完成后的配置(常用配置)

Aug 24 #Javascript

JS实现按比例缩小图片宽高

Aug 24 #Javascript

JS实现简易贪吃蛇游戏

Aug 24 #Javascript

通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法

Aug 24 #Javascript

Node.js 中判断一个文件是否存在

Aug 24 #Javascript

Javascript中Math.max和Math.max.apply的区别和用法详解

Aug 24 #Javascript

在Vue中使用HOC模式的实现

Aug 23 #Javascript