上面是實際效果，雖然丑陋。不過當(dāng)時寫這個效果的時候也并不順利。
代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#tab
{
?table-layout:auto;
?border-collapse:collapse;
?border:1px solid #000000;
?width:100%;
}
div
{
?width:100%;
?margin:0px;
?padding:0px;
?overflow:auto;
?border: 1px solid #4CA2ED;
?background-color:#E8F2FE;
?font-size:9pt;
}
td
{
?position:relative;
?padding:0px;
?margin:0px;
}
</style>
<script type="text/javascript">
function $(dom_id)
{
?return document.getElementById(dom_id);
}
function MouseDownToResize(obj)
{?
?obj.mouseDownY = event.clientY;
?$('td1').pareneTdH = $('td1').offsetHeight;
?$('td2').pareneTdH = $('td2').offsetHeight;
?$('td3').pareneTdH = $('td3').offsetHeight;
?$('tab').pareneTableH = $('tab').offsetHeight;
?obj.setCapture();//事件擴(kuò)張
}
function MouseMoveToResize(obj)
{?
?if(!obj.mouseDownY) return false;
?var newHeight = $('td2').pareneTdH*1+event.clientY*1-obj.mouseDownY;
?//拖動
?if((newHeight<0 && -1*newHeight<$('td1').pareneTdH )||(newHeight>0 && newHeight<$('td3').pareneTdH))
?{
??? $('td1').style.height = $('td1').pareneTdH+newHeight;
??? $('td3').style.height = $('td3').pareneTdH-newHeight;
?$('div1').style.height = $('td1').pareneTdH+newHeight;
??? $('div3').style.height = $('td3').pareneTdH-newHeight;
?$('tab').style.height = $('tab').pareneTableH;
?window.status = newHeight +"||"+ $('td3').style.height;
?}
}
function MouseUpToResize(obj)
{
??? obj.releaseCapture();
??? obj.mouseDownY=0;
}
</script>
</head>
<body>
? <table id="tab" cellpadding="0" cellspacing="0">
??? <tr><td valign=top id="td1"><div id="div1" style="height:250px;">
<pre>?
function $(dom_id)
{
?return document.getElementById(dom_id);
}
function MouseDownToResize(obj)
{?
?obj.mouseDownY = event.clientY;
?$('td1').pareneTdH = $('td1').offsetHeight;
?$('td2').pareneTdH = $('td2').offsetHeight;
?$('td3').pareneTdH = $('td3').offsetHeight;
?$('tab').pareneTableH = $('tab').offsetHeight;
?obj.setCapture();//事件擴(kuò)張
}
function MouseMoveToResize(obj)
{?
?if(!obj.mouseDownY) return false;
?var newHeight = $('td2').pareneTdH*1+event.clientY*1-obj.mouseDownY;
?//拖動
?if((newHeight<0 && -1*newHeight<=$('td1').pareneTdH )||(newHeight>0 && newHeight<=$('td3').pareneTdH))
?{
??? $('td1').style.height = $('td1').pareneTdH+newHeight;
??? $('td3').style.height = $('td3').pareneTdH-newHeight;
?$('div1').style.height = $('td1').pareneTdH+newHeight;
??? $('div3').style.height = $('td3').pareneTdH-newHeight;
?$('tab').style.height = $('tab').pareneTableH;
?window.status = newHeight +"||"+ $('td3').style.height;
?}
}
function MouseUpToResize(obj)
{
??? obj.releaseCapture();
??? obj.mouseDownY=0;
}
</pre>
?</div></td></tr>
?<tr bgcolor="#000" height="2" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);" style="cursor:n-resize;"><td id="td2"></td></tr>
?<tr><td id="td3"><div id="div3" style="height:150px;"></div></td></tr>
? </table>
</body>
</html>
JavaScript 拖動改變面板大小