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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
JavaScript 全角转半角部分
Oct 28 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
详解JavaScript 异步编程
Jul 13 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
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
javascript 继承实现方法
2009/08/26 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
python 内置函数filter
2017/06/01 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
python 定时修改数据库的示例代码
2018/04/08 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
pandas实现导出数据的四种方式
2020/12/13 Python
自荐信格式范文
2013/10/07 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
2014年教师工作总结
2014/11/10 职场文书
目标责任书格式范文
2015/05/11 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript