两栏布局右侧自适应+左右拖动改变两栏宽度

最新推荐文章于 2023-09-06 15:14:22 发布

转载最新推荐文章于 2023-09-06 15:14:22 发布 · 3.9k 阅读

本文介绍了一种使用HTML、CSS及JavaScript实现的左右两栏布局方法，中间设有可拖动条来调整两侧宽度。通过固定绝对定位设定各部分位置，并借助JavaScript实现拖动效果。

今天一下午的学习成果，分享一下，欢迎高手指教。

首先是布局，左右两栏布局，中间留出可拖动的地方。布局很简单，左边一个div，右边一个div，中间的div是用来拖动的。

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>左右两栏拖动改变宽度</title>
 6 </head>
 7 
 8 <body>
 9     <div id="left">左侧内容</div>
10     <div id="middle"></div>
11     <div id="right">
12             右侧内容
13     </div>
14   
15 </body>
16 </html>

css布局：采用固定绝对定位，并定下坐标的方法，我感觉这种方法比较笨的，水平有限。

1 div,body,html{margin:0; padding:0; width:100%;}
2 #left,#right,#middle{ height:300px; position:absolute;}
3 #left{width:300px; background:#ccc;}    
4 #middle{ width:9px; background:#666;left:300px;}
5 #middle:hover{ cursor:w-resize;}
6 #right{right:0; background:#ccc; left:309px; width:auto;}

最后的js实现中间栏的拖动效果：

 1 　　　　function $(id) {
 2             return document.getElementById(id)
 3         }
 4         window.onload = function() {
 5             left = $("left"), right = $("right"), middle = $("middle");
 6             var middleWidth=9;
 7             middle.onmousedown = function(e) {
 8                 var disX = (e || event).clientX;
 9                 middle.left = middle.offsetLeft;
10                 document.onmousemove = function(e) {
11                     var iT = middle.left + ((e || event).clientX - disX);
12                     var e=e||window.event,tarnameb=e.target||e.srcElement;
13                     maxT=document.body.clientWidth;
14                     iT < 0 && (iT = 0);
15                     iT > maxT && (iT = maxT);
16                     middle.style.left = left.style.width = iT + "px";
17                     right.style.width = document.body.clientWidth - iT -middleWidth + "px";
18                     right.style.left = iT+middleWidth+"px";
19                     return false
20                 };
21                 document.onmouseup = function() {
22                     document.onmousemove = null;
23                     document.onmouseup = null;
24                     middle.releaseCapture && middle.releaseCapture()
25                 };
26                 middle.setCapture && middle.setCapture();
27                 return false
28             };
29         };