左右两栏布局右侧自适应+左右拖动改变两栏宽度
(编辑：jimmy 日期: 2024/11/26 浏览：3 次 )
今天一下午的学习成果，分享一下，欢迎高手指教。
首先是布局，左右两栏布局，中间留出可拖动的地方。布局很简单，左边一个div，右边一个div，中间的div是用来拖动的。
复制代码代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>左右两栏拖动改变宽度</title>
</head>
<body>
<div id="left">左侧内容</div>
<div id="middle"></div>
<div id="right">
右侧内容
</div>
</body>
</html>
css布局：采用固定绝对定位，并定下坐标的方法，我感觉这种方法比较笨的，水平有限。
复制代码代码如下:
div,body,html{margin:0; padding:0; width:100%;}
#left,#right,#middle{ height:300px; position:absolute;}
#left{width:300px; background:#ccc;}
#middle{ width:9px; background:#666;left:300px;}
#middle:hover{ cursor:w-resize;}
#right{right:0; background:#ccc; left:309px; width:auto;}
最后的js实现中间栏的拖动效果：
复制代码代码如下:
function $(id) {
return document.getElementById(id)
}
window.onload = function() {
left = $("left"), right = $("right"), middle = $("middle");
var middleWidth=9;
middle.onmousedown = function(e) {
var disX = (e || event).clientX;
middle.left = middle.offsetLeft;
document.onmousemove = function(e) {
var iT = middle.left + ((e || event).clientX - disX);
var e=e||window.event,tarnameb=e.target||e.srcElement;
maxT=document.body.clientWidth;
iT < 0 && (iT = 0);
iT > maxT && (iT = maxT);
middle.style.left = left.style.width = iT + "px";
right.style.width = document.body.clientWidth - iT -middleWidth + "px";
right.style.left = iT+middleWidth+"px";
return false
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
middle.releaseCapture && middle.releaseCapture()
};
middle.setCapture && middle.setCapture();
return false
};
};
首先是布局，左右两栏布局，中间留出可拖动的地方。布局很简单，左边一个div，右边一个div，中间的div是用来拖动的。
复制代码代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>左右两栏拖动改变宽度</title>
</head>
<body>
<div id="left">左侧内容</div>
<div id="middle"></div>
<div id="right">
右侧内容
</div>
</body>
</html>
css布局：采用固定绝对定位，并定下坐标的方法，我感觉这种方法比较笨的，水平有限。
复制代码代码如下:
div,body,html{margin:0; padding:0; width:100%;}
#left,#right,#middle{ height:300px; position:absolute;}
#left{width:300px; background:#ccc;}
#middle{ width:9px; background:#666;left:300px;}
#middle:hover{ cursor:w-resize;}
#right{right:0; background:#ccc; left:309px; width:auto;}
最后的js实现中间栏的拖动效果：
复制代码代码如下:
function $(id) {
return document.getElementById(id)
}
window.onload = function() {
left = $("left"), right = $("right"), middle = $("middle");
var middleWidth=9;
middle.onmousedown = function(e) {
var disX = (e || event).clientX;
middle.left = middle.offsetLeft;
document.onmousemove = function(e) {
var iT = middle.left + ((e || event).clientX - disX);
var e=e||window.event,tarnameb=e.target||e.srcElement;
maxT=document.body.clientWidth;
iT < 0 && (iT = 0);
iT > maxT && (iT = maxT);
middle.style.left = left.style.width = iT + "px";
right.style.width = document.body.clientWidth - iT -middleWidth + "px";
right.style.left = iT+middleWidth+"px";
return false
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
middle.releaseCapture && middle.releaseCapture()
};
middle.setCapture && middle.setCapture();
return false
};
};
下一篇：css实现背景渐变与底部固定的蓝天白云示例