jQuery 插件: colResizable Github链接

单个div 鼠标调整宽高

多列自动水平缩放

手动 两列 js 代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
html, body, div {
  margin: 0;
  padding: 0;
  border: 0;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.gf_s {
  float:left;
  width:40px;
  cursor:col-resize;
  background-color:#c82f2f;
  border:#99BBE8 1px solid;
}
.gf_s_g {
  float: left;
  width: 40px;
  display: none;
  cursor: e-resize;
  position: absolute;
  background-color: #1bea63;
  border: 7px dotted solid;
  filter: alpha(opacity=60);
  opacity: 0.6;
  opacity: 0.6;
  z-index: 1000;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
var $sliderMoving = false;
function mousePosition(ev) {
  if (!ev) ev = window.event;
  if (ev.pageX || ev.pageY) {
    return { x: ev.pageX, y: ev.pageY };
  }
  return {
    x: ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,
    y: ev.clientY + document.documentElement.scrollTop - document.body.clientTop
  };
};
function getElCoordinate(dom) {
  var t = dom.offsetTop;
  var l = dom.offsetLeft;
  dom = dom.offsetParent;
  while (dom) {
    t += dom.offsetTop;
    l += dom.offsetLeft;
    dom = dom.offsetParent;
  };
  return { top: t, left: l };
};
 
function sliderGhostMoving(e) {
  $("#divSG").css({ left: mousePosition(e).x , display: "block" });
};
function sliderHorizontalMove(e) {
  var lWidth = getElCoordinate($("#divSG")[0]).left;
  var rWidth = $(window).width() - lWidth - 6;
  $("#divLeft").css("width", lWidth + "px");
  $("#divRight").css("width", rWidth + "px");
  $("#divSG").css("display", "none");
};
 
function reinitSize() {
  var width = $(window).width() - 6;
  var height = $(window).height();
  $("#divLeft").css({ height: height + "px", width: width * 0.75 + "px" });
  $("#divS").css({ height: height - 2 + "px", width: "4px" });
  $("#divSG").css({ height: height - 2 + "px", width: "4px" });
  $("#divRight").css({ height: height + "px", width: width * 0.25 + "px" });
}
 
$(document).ready(function () {
  reinitSize();
  $("#divS").on("mousedown", function (e) {
    $sliderMoving = true;
    $("divP").css("cursor", "e-resize");
  });
 
  $("#divP").on("mousemove", function (e) {
    if ($sliderMoving) {
      sliderGhostMoving(e);
    }
  });
 
  $("#divP").on("mouseup", function (e) {
    if ($sliderMoving) {
      $sliderMoving = false;
      sliderHorizontalMove(e);
      $("#divP").css("cursor", "default");
    }
  });
});
$(window).resize(function () {
  reinitSize();
});
</script>
</head>
<body>
<div id="divP" style="width:100%; height:100%;">
  <div id="divLeft" style="background-color:rgba(0, 128, 0, 0.16);float:left;">
      中间的拖动条 是个div.
      这需要设置两个div .一个是 拖动前显示的.
      一个是拖动中 显示的.
      
      
      
      一.代码注释:
(1).var $sliderMoving = false,声明一个变量并赋值为false,作用一个标识,用来说明是否可以拖动调整宽度。
(2).function mousePosition(ev) {  if (!ev) ev = window.event;
  if (ev.pageX || ev.pageY) {
    return { x: ev.pageX, y: ev.pageY };
  }
  return {
    x: ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,
    y: ev.clientY + document.documentElement.scrollTop - document.body.clientTop
  };
},此方法可以获取鼠标在文档中的坐标,具体可以参阅js获取鼠标在文档中的坐标一章节。

(3).function getElCoordinate(dom) {
  var t = dom.offsetTop;
  var l = dom.offsetLeft;
  dom = dom.offsetParent;
  while (dom) {
    t += dom.offsetTop;
    l += dom.offsetLeft;
    dom = dom.offsetParent;
  };
  return { top: t, left: l };
},此函数用来获取一个元素在body中的坐标,由于已经设置body的外边距为0,那么就是获取元素再文档中坐标。
具体可以参阅获取元素在文档中坐标一章节。

(4).function sliderGhostMoving(e) {
  $("#divSG").css({ left: mousePosition(e).x - 2, display: "block" });
},设置拖动的时候浅色的分隔条的坐标,并设置它显示。
(5).function sliderHorizontalMove(e) {},此方法实现设置左右两栏尺寸的功能。
(6).var lWidth = getElCoordinate($("#divSG")[0]).left,获取分隔条距离文档左侧的距离,其实也就是左栏的尺寸。
(7).var rWidth = $(window).width() - lWidth - 6,获取游览的尺寸,减6是减去分隔栏的width和border。
(8).$("#divLeft").css("width", lWidth + "px"),设置左栏宽度。
(9).$("#divRight").css("width", rWidth + "px"),设置右栏的宽度。
(10).$("#divSG").css("display", "none"),设置那个拖动的时候显示的半透明的分隔栏隐藏。
(11).function reinitSize() {},当调整窗口尺寸的时候调整左右两栏的尺寸。
(12).var width = $(window).width() - 6,获取除去分隔条之外的窗口宽度。
(13).var height = $(window).height(),获取窗口的高度。
(14).$("#divLeft").css({ height: height + "px", width: width * 0.75 + "px" }),设置左栏的尺寸。
(15).$("#divS").css({ height: height - 2 + "px", width: "4px" }),设置分隔栏的高度和宽度。
(16). $("#divSG").css({ height: height - 2 + "px", width: "4px" }),设置拖动时候出现的分隔栏的高度和宽度。
(17).$("#divRight").css({ height: height + "px", width: width * 0.25 + "px" }),设置右栏的尺寸。
(18).$(document).ready(function () {}),当文档结构完全加载完毕再去执行函数中的代码。
(19).reinitSize(),先初始化一下窗口的尺寸。
(20).$("#divS").on("mousedown", function (e) {
  $sliderMoving = true;
  $("divP").css("cursor", "e-resize");
}),为分隔条注册mousedown事件处理函数。
当鼠标按下的时候,将$sliderMoving设置为true,表示是可以拖动调整的。
同事设置鼠标的指针的形状。
(21).$("#divP").on("mousemove", function (e) {
  if ($sliderMoving) {
    sliderGhostMoving(e);
  }
}),为分隔条注册mousemove事件处理函数。


      
  </div>
  
  
  
  
  
  
  <div id="divS" class="gf_s" style="float:left;"></div>
  <div id="divSG" class="gf_s_g" style="float:left;"></div>
  <div id="divRight" style="background-color:blue;float:left;"></div>
</div>
</body>
</html>