浏览 4509 次
|
锁定老帖子 主题：frame 框架 拖动
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-09-10
怎么实现拖动中间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" onmousedown="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" onmousedown="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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
