<html>
<TITLE> 分隔条 </TITLE>
<head>
<script language="javascript">
var oSplitter, oTdSplitter, oTdLeft, oTdRight, oTable;
var posTdSplitter, posTable;
var bLoaded = false;
var bStart = false;
var iPadding = 0;
function Position(x, y)
{
this.x = x;
this.y = y;
}
function GetPosition(obj)
{
var objThis = obj;
var oBody = document.body;
var oLeft = oTop = 0;
while (objThis!=oBody)
{
oLeft += objThis.offsetLeft;
oTop += objThis.offsetTop;
objThis = objThis.offsetParent;
}
return new Position(oLeft, oTop);
}
function fnInit()
{
oSplitter = document.getElementById("splitter");
oTdSplitter = document.getElementById("tdSplitter");
oTdLeft = document.getElementById("tdLeft");
oTdRight = document.getElementById("tdRight");
oTable = document.getElementById("table");
posTable = GetPosition(oTable);
oSplitter.style.height = oTdSplitter.offsetHeight;
oSplitter.style.width = oTdSplitter.offsetWidth;
bLoaded = true;
}
function fnMouseDown(event)
{
if (bLoaded == false)
{
alert("页面加载未完成，请稍候！");
return;
}
posTdSplitter = GetPosition(oTdSplitter);
iPadding = posTdSplitter.x - event.clientX;
oSplitter.style.left = posTdSplitter.x;
oSplitter.style.top = posTdSplitter.y;
oSplitter.style.display = "block";
if (oSplitter.setCapture)
oSplitter.setCapture();
bStart = true;
}
function fnMouseUp(event)
{
if (bStart == true)
{
oSplitter.style.display = "none";
if (event.clientX > posTable.x && event.clientX < posTable.x + oTable.offsetWidth - oTdSplitter.offsetWidth)
{
oTdLeft.style.width = event.clientX - posTable.x;
}
if (oSplitter.releaseCapture)
oSplitter.releaseCapture();
bStart = false;
}
}
function fnMouseMove(event)
{
if (bStart == true)
{
oSplitter.style.left = event.clientX + iPadding;
}
}
</script>
</head>
<body onload="fnInit();" onmouseup="fnMouseUp(event);" onmousemove="fnMouseMove(event);" style="margin:0px;" onselectstart="return false;">
<div style="position: absolute;width:4px;height:400px;background-color: blue;z-index:9999;display:none;cursor: col-resize;" id="splitter"></div>
<div cellspacing="0" cellpadding="0" border="0" style="height:800px; width:100%;" id="table">
<div>
<div style="width: 300px;
min-width:200px;
max-width:1000px;
word-wrap:break-word;
float: left;
overflow:scroll;
height:800px;
"
id="tdLeft">
123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123
123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123
123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123
123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123
123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123
</div>
<div style="width: 8px;
height: 800px;
float: left;
background-color: #ccc;
cursor: col-resize;"
id="tdSplitter"
onmousedown="fnMouseDown(event);"> </div>
<div id="tdRight"
style="word-wrap:break-word;min-width:200px;
overflow:scroll;
">rightcontentrightconterightcontentrightconterightcontentrightconterightcontentrightconterightcontentrightconterightcontentrightconterightcontentrightconterightcontentrightconterightcontentrightconterightcontentrightconterightcontentrightconterightcontentrightconterightcontentrightconterightcontentrightconterightcontentrightconterightcontentrightconterightcontentrightconterightcontentrightconterightcontentrightconterightcontentrightconte</div>
</div>
</div>
</body>
</HTML>
原文：http://www.cnblogs.com/chenyongblog/p/4637501.html