怎么实现拖动中间frame时 改变左右frame的大小
如:
<frameset rows="75,*" cols="*" framespacing="0" frameborder="no">
<frame src="second_top.html" name="topFrame" scrolling="NO" noresize />
<frameset cols="193,5,*" framespacing="0" frameborder="NO" border="0" name="centerframe" id="centerframe">
<frame src="second_left.html" id="leftframe" name="leftframe" scrolling="no" />
<frame src="second_left_middle.html" name="leftMiddleframe" id="leftMiddleframe" marginwidth="0" framespacing="0" marginheight="0" frameborder="0" scrolling="no" noresize />
<frame src="second_main.html" name="mainframe" />
</frameset>
</frameset>
<noframes><body>
</body></noframes>
写了个js,但是效果不是很好,拖动时页面闪烁的利害,并且位置不是很准确,不知道问题在哪里
second_left_middle.html如下:
<%@page pageEncoding="GBK" contentType="text/html; charset=GBK" %>
<%@ include file="include/include.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body topmargin="0" leftmargin="0">
<table height="100%" width="100%" cellspacing="0" cellpadding="0" border="2" id="aaa">
<tr height="40%" style="cursor:w-resize" οnmοusedοwn="Move.Resize(this)">
<td style="background:transparent url(${baseUrl}/img/vertical.jpg) repeat-y;"></td>
</tr>
<tr height="4%">
<td align="left"><a href="#"><img src="${baseUrl}/img/left.jpg" alt="关闭菜单栏" name="frameImg" width="5" height="37" border="0" id="frameImg" onClick="showhideFrame(this)"></a></td>
</tr>
<tr height="50%" style="cursor:w-resize" οnmοusedοwn="Move.Resize(this)">
<td style="background:transparent url(${baseUrl}/img/vertical.jpg) repeat-y;"></td>
</tr>
</table>
<script language="JavaScript">
function showhideFrame(imgObj)
{
var cols=parent.document.all["centerframe"].cols;
if(cols=="0,5,*")
{
parent.document.all["centerframe"].cols='193,5,*';
imgObj.src="${baseUrl}/img/left.jpg";
imgObj.alt="关闭菜单栏";
}
else
{
parent.document.all["centerframe"].cols='0,5,*';
imgObj.src="${baseUrl}/img/right.jpg";
imgObj.alt="打开菜单栏";
}
}
var Move = function(){};
Move.Resize=function(obj){
var parentObj = parent.document.all["centerframe"];
//var obj = parent.document.all[id];
//alert(obj.onmousedown);
obj.onselectstart = function()
{
return(false);
};
obj.onmousedown = function(e){
e = window.event;
//alert(e);
event.srcElement.setCapture();
//var x=e.x;
var x=e.layerX||e.offsetX;
//alert(x);
document.onmousemove = function(e){
e = window.event;
//alert("aaa" + e.clientX);
var newX = e.clientX - x ;
parentObj.cols = newX + ",5,*";
};
document.onmouseup = function(){
//alert(left);
//parentObj.cols = left + ",5,*";
document.onmousemove = null;
event.srcElement.releaseCapture();
};
};
}
</script>
</body>
</html>