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

2024-05-06 16:49:24

字体：大中小

来源：转载

供稿：网友

封装为了jq插件，如下

drag.js

;(function ($) { $.fn.dragDiv = function (options) {  var def = {   maxW:600,// 可伸缩的最大宽度   minW:50// 可伸缩的最小宽度  };// 参数默认值  var opts = $.extend(def,options);// 扩展参数，使用默认值或传参  //设置最大/最小宽度  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详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对VeVb武林网网站的支持！

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：9102了，你还不会移动端真机调试吗

下一篇：详解用JS添加和删除class类名