原生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 相关文章推荐
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
一个JavaScript获取元素当前高度的实例
Oct 29 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
Vue render函数实战之实现tabs选项卡组件
Apr 22 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数组的概述及分类与声明代码演示
2013/02/26 PHP
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
大学毕业感言100字
2014/02/03 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
道德模范事迹材料
2014/12/20 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
讲解MySQL增删改操作
2022/05/06 MySQL