原生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 相关文章推荐
js判断undefined类型示例代码
Feb 10 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
js数组去重的hash方法
Dec 22 Javascript
原生js编写2048小游戏
Mar 17 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 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实现WEB动态网页静态
2006/10/09 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
javascript新手语法小结
2008/06/15 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
JavaScript window.location对象
2014/11/14 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
python 将字符串转换成字典dict
2013/03/24 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
python实现抖音视频批量下载
2018/06/20 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
python实现文字版扫雷
2020/04/24 Python
Python 列表反转显示的四种方法
2020/11/16 Python
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
驾驶员岗位职责
2014/01/29 职场文书
宣传工作经验材料
2014/06/02 职场文书
课外活动总结
2015/02/04 职场文书
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python