frame 框架拖动

最新推荐文章于 2021-07-08 10:16:55 发布

iteye_6897

最新推荐文章于 2021-07-08 10:16:55 发布

阅读量377

点赞数

分类专栏： javascript 文章标签：框架 HTML JavaScript JSP XHTML ViewUI

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

怎么实现拖动中间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>

iteye_6897

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
frame 框架拖动

怎么实现拖动中间frame时改变左右frame的大小如：&lt;frameset rows="75,*" cols="*" framespacing="0" frameborder="no"&gt; &lt;frame src="second_top.html" name="topFrame" scrolling="NO" noresi
复制链接

扫一扫