原生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 类
Nov 07 Javascript
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
js字符串操作方法实例分析
May 06 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
javascript实现简易计算器功能
Sep 23 Javascript
从原生JavaScript到React深入理解
Jul 23 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
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
学习面向对象之面向对象的术语
2010/11/30 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
利用python获取Ping结果示例代码
2017/07/06 Python
python实现石头剪刀布小游戏
2021/01/20 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
python opencv进行图像拼接
2020/03/27 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
仓库主管的岗位职责
2013/12/04 职场文书
护理专业自荐信范文
2014/02/26 职场文书
小学生学习感言
2014/03/10 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
质量保证书格式模板
2015/02/27 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
《雷雨》教学反思
2016/02/20 职场文书
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS