原生js拖拽实现图形伸缩效果


Posted in Javascript onFebruary 10, 2020

本文实例为大家分享了js拖拽实现图形伸缩效果的具体代码,供大家参考,具体内容如下

点击矩形的四个角和四个边实现不同的效果

原生js拖拽实现图形伸缩效果

原生js拖拽实现图形伸缩效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      padding: 0;
      margin:0;
    }
    .div1{
      width: 200px;
      height: 200px;
      background-color: #71e4ff;
      position: absolute;
      top: 200px;
      left: 200px;
    }
    .t,
    .b{
      width: 100%;
      height: 20px;
      background-color:#ffa2d3;
      position: absolute;
    }
    .t{
      left: 0;
      top:0;
    }
    .b{
      left: 0;
      bottom:0;
    }
    .r,
    .l{
      width: 20px;
      height: 100%;
      background-color:#ffa2d3;
      position: absolute;
    }
    .r{
      right: 0;
      top:0;
    }
    .l{
      left: 0;
      top:0;
    }
    .lt,
    .lb,
    .rt,
    .rb{
      width: 20px;
      height: 20px;
      background-color: #93ff6b;
      position: absolute;
    }
    .lt{
      left: 0;
      top:0;
    }
    .rt{
      right: 0;
      top:0;
    }
    .lb{
      left: 0;
      bottom: 0;
    }
    .rb{
      right: 0;
      bottom:0;
    }
    
  </style>
</head>
<body>
  <div class="div1" id="_div1">
    <div class="t"></div>
    <div class="r"></div>
    <div class="b"></div>
    <div class="l"></div>
    <div class="lt"></div>
    <div class="lb"></div>
    <div class="rt"></div>
    <div class="tb"></div>
  </div>
</body>
</html>
<script>
  // 获取元素
  var _div1 = document.getElementById("_div1");
  var divs = _div1.children;
  // 遍历每个可以拖拽的元素
  for(var i = 0;i < divs.length ;i++)
  {
    drag(divs[i]);
  }
  // 封装一个拖拽函数
   function drag(obj){
    obj.onmousedown = function(event){
      // 捕获事件
      var event = event || window.event;
      // 存储当前的_div1的宽高
      var divW = _div1.offsetWidth;
      var divH = _div1.offsetHeight;
      // 获得当前_div1的offsetLeft 和 offsetTop
      var divL = _div1.offsetLeft;
      var divT = _div1.offsetTop;
      // 存储鼠标按下时的位置
      var clientx = event.clientX;
      var clienty = event.clientY;
      document.onmousemove = function(event){
        var event = event || window.event;
        if(obj.className.indexOf('t') != -1){
          _div1.style.height = divH + ( clienty- event.clientY) + 'px';
          _div1.style.top = divT -( clienty- event.clientY)+ 'px';
        }
        if(obj.className.indexOf('b') != -1){
          _div1.style.height = divH + ( event.clientY -clienty ) + 'px';
        }
         if(obj.className.indexOf('r')!= -1){
          _div1.style.width = divW + ( event.clientX - clientx) + 'px';
        }
         if(obj.className.indexOf('l')!= -1){
          _div1.style.width = divW + ( clientx - event.clientX) + 'px';
          _div1.style.left = event.clientX + 'px';
        }

      }
      document.onmouseup = function(){
        document.onmousemove = null;
        document.onmouseup = null;
      }
      
    }
    
      return false;
   }
      
</script>

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

Javascript 相关文章推荐
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
js常用排序实现代码
Dec 28 Javascript
用js实现in_array的方法
Nov 05 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
jquery if条件语句的写法
May 19 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
ElementUI实现el-form表单重置功能按钮
Jul 21 Javascript
js实现单元格拖拽效果
Feb 10 #Javascript
详解Vue template 如何支持多个根结点
Feb 10 #Javascript
JavaScript canvas动画实现时钟效果
Feb 10 #Javascript
JavaScript canvas仿代码流瀑布
Feb 10 #Javascript
Vue数字输入框组件使用方法详解
Feb 10 #Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 #Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 #Javascript
You might like
谈谈PHP语法(2)
2006/10/09 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
javascript 动态生成私有变量访问器
2009/12/06 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
vue.js的提示组件
2017/03/02 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
详解Django通用视图中的函数包装
2015/07/21 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
python 2.7.14安装图文教程
2018/04/08 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
python遍历小写英文字母的方法
2019/01/02 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
用python对excel查重
2020/12/07 Python
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
廉洁自律演讲稿
2014/05/22 职场文书
普通话演讲稿
2014/09/03 职场文书
民政局个人整改措施
2014/09/24 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫