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>

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

Javascript 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
vue router-link传参以及参数的使用实例
Nov 10 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
详解vue添加删除元素的方法
Jun 30 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
You might like
图解上海144收音机
2021/03/02 无线电
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
JS常用函数使用指南
2014/11/23 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
python按照多个条件排序的方法
2019/02/08 Python
python实现简易学生信息管理系统
2020/04/05 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
大学生学习党课思想汇报
2014/01/03 职场文书
创建青年文明号材料
2014/05/09 职场文书
2014年人事科工作总结
2014/11/19 职场文书
委托书英文
2015/01/28 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
教师远程研修感悟
2015/11/18 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL