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 相关文章推荐
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
jQuery实现返回顶部功能
Feb 23 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
jquery validate表单验证插件
Sep 06 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 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
非常经典的PHP文件上传类分享
2016/05/15 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
JS动画效果代码3
2008/04/03 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
python回调函数用法实例分析
2015/05/09 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
安全生产标语
2014/06/06 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
三下乡个人总结
2015/03/04 职场文书
博士论文答辩开场白
2015/06/01 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python