快捷導(dǎo)航

js實(shí)現(xiàn)鼠標(biāo)拖拽縮放div實(shí)例代碼

更新時(shí)間：2019年03月25日 15:31:14 作者：看淡江湖

這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)拖拽縮放div，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

封裝為了jq插件，如下

drag.js

;(function ($) {
 $.fn.dragDiv = function (options) {
  var def = {
   maxW:600,// 可伸縮的最大寬度
   minW:50// 可伸縮的最小寬度
  };// 參數(shù)默認(rèn)值
  var opts = $.extend(def,options);// 擴(kuò)展參數(shù)，使用默認(rèn)值或傳參
  //設(shè)置最大/最小寬度
  var max_width = opts.maxW,
   min_width = opts.minW;
 
  //記錄鼠標(biāo)相對left盒子x軸位置
  var mouse_x = 0;
  var left = $(this).parent('div')[0];
 
  //鼠標(biāo)移動(dòng)事件
  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;
   //阻止默認(rèn)事件
   e.preventDefault();
   mouse_x = e.clientX - left.offsetWidth;// 可伸縮div距離左側(cè)邊界的寬度
   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>鼠標(biāo)進(jìn)行伸縮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實(shí)現(xiàn)鼠標(biāo)拖拽縮放div詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: