先看效果
先进入页面
当鼠标停留在中间div时，鼠标变成双箭头
点击拖拉
往右边拉
往最左边拉
代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <!--<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>--> 6 <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 7 <title> 8 RunJS 演示代码 9 </title> 10 <style> 11 /*设置所有的厚度和元素间为0*/ 12 * { 13 margin: 0; 14 padding: 0; 15 } 16 17 /*设置页面背景颜色*/ 18 body { 19 background-color: #af4040; 20 } 21 22 /*设置所有div绝对定位且左浮动，高度为500px*/ 23 div { 24 position: absolute; 25 float: left; 26 height: 500px; 27 } 28 29 /*设置左边div背景颜色、宽度为200px、左边距离窗口为0*/ 30 div.left { 31 background-color: #B2B2B2; 32 width: 200px; 33 left: 0px; 34 } 35 36 /*设置右边div背景颜色、宽度200px、右边距离窗口为205px、右浮动*/ 37 div.right { 38 background-color: #00B83F; 39 width: 200px; 40 right: 205px; 41 float: right; 42 } 43 44 /*设置中间div宽度5px、鼠标为左右两个箭头、背景颜色、元素的堆叠顺序为[后来者居上的准则]、左边距离窗口200px*/ 45 div.center { 46 width: 5px; 47 cursor: col-resize; 48 background-color: #FFB951; 49 z-index: 1; 50 left: 200px; 51 } 52 </style> 53 <script> 54 $(function () { 55 // 分别是：当前窗口、左边div、中间div、右边div 56 var doc = $(document), dl = $("div.left"), dc = $("div.center"), dr = $("div.right"); 57 // 三个div宽度的总和 58 var sum = dl.width() + dr.width() + dc.width(); 59 // 中间div拖动鼠标事件 60 dc.mousedown(function (e) { 61 // 把当前中间div的dom对象转为jquery对象 62 // var me = $(this); 63 // e.clientX当前鼠标的x轴长度，me.css("left")中间div距离左边长度，me.prop("clientLeft")中间div距离左边div长度 64 var deltaX = e.clientX - (parseFloat(dc.css("left")) || parseFloat(dc.prop("border-left"))); 65 // deltaX表示记录鼠标点击时，距离中间div左边的距离，取值范围不会超过中间div的宽度 66 // 鼠标移动事件 67 doc.mousemove(function (e) { 68 // lt表示鼠标移动时，中间div左边距离左边窗口的长度 69 var lt = e.clientX - deltaX; 70 // 这里表示，当中间div左边距离左边窗口的长度小于等于0时就等于0，就是保证不小于0 71 lt = lt < 0 ? 0 : lt; 72 // 这里表示，当中间div左边距离左边窗口的长度大于左边div加中间div长度时就等于左边div加中间div长度，就是保证不大于左边div加中间div的长度 73 lt = lt > sum - dc.width() ? sum - dc.width() : lt; 74 // 设置中间div左边的宽度，也就是等于当前鼠标的x轴 75 dc.css("left", lt + "px"); 76 // 设置左边div的宽度 77 dl.width(lt); 78 // 设置右边div的宽度 79 dr.width(sum - lt - dc.width()); 80 }); 81 }); 82 83 // 鼠标松开后删除鼠标移动事件 84 doc.mouseup(function () { 85 doc.unbind("mousemove"); 86 }); 87 88 // 当鼠标点击移动开始不选中div里的内容 89 doc[0].onselectstart = function () { 90 return false; 91 }; 92 }); 93 </script> 94 </head> 95 <body> 96 <div class="left"> 97 这是左边的div 98 </div> 99 <div class="center"> 100 这是中间的div 101 </div> 102 <div class="right"> 103 这是右边的div 104 </div> 105 </body> 106 </html>