1. js实现鼠标拖拽缩放div实例代码

     更新时间:2019年03月25日 15:31:15   作者:看淡江湖   我要评论

    这篇文章主要介绍了js实现鼠标拖拽缩放div,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    封装为了jq插件,如下

    drag.js

    ;(function ($) {
     $.fn.dragDiv = function (options) {
      var def = {
       maxW:600,// 可伸缩的最大宽度
       minW:50// 可伸缩的最小宽度
      };// 参数默?#29616;?
      var opts = $.extend(def,options);// 扩展参数,使用默?#29616;?#25110;传参
      //设置最大/最小宽度
      var max_width = opts.maxW,
       min_width = opts.minW;
     
      //记录鼠标相对left盒子x轴位置
      var mouse_x = 0;
      var left = $(this).parent('div')[0];
     
      //鼠标移动事件
      function mouseMove(e) {
       var e = e || window.event;
       var left_width = e.clientX - mouse_x;// 可伸缩div的宽度
       left_width = left_width < min_width ? min_width : left_width;
       left_width = left_width > max_width ? max_width : left_width;
       left.style.width = left_width + "px";
      }
      //终止事件
      function mouseUp() {
       document.onmousemove = null;
       document.onmouseup = null;
      }
      $(this).mousedown(function (e) {
       var e = e || window.event;
       //阻止默认事件
       e.preventDefault();
       mouse_x = e.clientX - left.offsetWidth;// 可伸缩div距离左侧边界的宽度
       document.onmousemove = function () {
        mouseMove()
       };
       document.onmouseup = function () {
        mouseUp()
       };
      })
     }
    })(jQuery)
    

    html文件

    <!doctype html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport"
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>鼠标进行伸缩div</title>
     <style>
      * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
      }
      .dragdom {
       background: #cccccc;
       width: 100px;
       height: 600px;
       margin: 0 auto;
       position: relative;
      }
      .dragdom .drag {
       border: 1px transparent solid;
       width: 0px;
       height: 100%;
       position: absolute;
       top: 0;
       right: 0;
       cursor: e-resize;
      }
     </style>
    </head>
    <body>
    <div class="dragdom"><div class="drag"></div></div>
    </body>
    </html>
    <script type="text/javascript" src="./jquery.min.js"></script>
    <script type="text/javascript" src="./drag.js"></script>
    <script>
     $(function () {
      $('.drag').dragDiv();
     })
    </script>
    

    以上所述是小编给大家介绍的js实现鼠标拖拽缩放div详解整合,希望对大家有所帮助,如果大家有任?#25105;?#38382;请给我留言,小编会及时回复大家的。在此也非常?#34892;?#22823;家对脚本之家网站的支持!

    相关文章

    最新评论

    山东群英会开奖查询