原生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 相关文章推荐
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
js 代码优化点滴记录
Feb 19 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 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
ThinkPHP缓存方法S()概述
2014/06/13 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
浅析js封装和作用域
2013/07/09 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
jquery使用经验小结
2015/05/20 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
大一学生假期实习的自我评价
2013/10/12 职场文书
医药大学生求职简历的自我评价
2013/10/17 职场文书
公司拓展活动方案
2014/02/13 职场文书
群教班子对照检查材料
2014/08/26 职场文书
计划生育目标责任书
2015/05/09 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
vue特效之翻牌动画
2022/04/20 Vue.js