原生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日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
jQuery模拟超链接点击效果代码
Apr 21 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 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
计数器详细设计
2006/10/09 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
Pytorch之保存读取模型实例
2019/12/30 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
应届生会计电算化求职信
2013/10/03 职场文书
酒店服务与管理毕业生求职信
2013/11/02 职场文书
党员承诺书内容
2014/03/26 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python