实现可以拖动框架边框的宽度

最新推荐文章于 2022-03-24 16:11:22 发布

lishuiqing

最新推荐文章于 2022-03-24 16:11:22 发布

阅读量252

点赞数

分类专栏： js及框架文章标签：框架 HTML

本文链接：https://blog.csdn.net/lishuiqing/article/details/83520860

版权

js及框架专栏收录该内容

5 篇文章 0 订阅

订阅专栏

[color=red]需求:可以随时拖动中间框架(center)改变两边的边框价(left,right)宽度.[/color]

[color=red]主页面:[/color]

<HTML>
<frameset cols="400,8,*" frameborder="1" border="1" framespacing="0" framepadding="0" id="topFrame"
 style="border:0px solid #cccccc" >
   <frame name='left' src='http://www.baidu.com' frameborder="0" ></frame>
   <frame name='center' src='newBlank.htm'  scrolling="no" frameborder="0"  noresize></frame>
   <frame name='right' src='http://www.baidu.com' frameborder="0" ></frame>
</frameset>
</HTML>

[color=red]中间的页面newBank.htm主要代码:[/color]

<HTML>
<head>
<script language="javascript"
 src="jquery.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
function downToResize(obj){
	obj.mouseDownX=event.clientX; 
	obj.parentLeftFW = parent.left.document.body.offsetWidth; 
	obj.setCapture(); 
}
function moveToResize(obj){
	if(!obj.mouseDownX) return false; 	
	var changeW = event.clientX*1-obj.mouseDownX;
    var newLeftW=obj.parentLeftFW*1+changeW; 
	if(newLeftW<=200) newLeftW = 200;
	parent.parent.document.body.cols= newLeftW+',8,*';	
}
function upToResize(obj){

	obj.releaseCapture(); 
	obj.mouseDownX=0; 
	obj.style.cursor = 'default';
}
//-->
</SCRIPT>
</head>
<div id='show' style="display:'inline';position:'absolute';z-index:5;border:'1px dotted red';width:'100px';height:'100px'"></div>
<body style='background-color:gray' onmousedown="downToResize(this);"
		  onmousemove="moveToResize(this);"
		  onmouseup="upToResize(this);"	 onmouseenter="this.style.cursor='col-resize';" 
		  onmouseout="this.style.cursor='default';">		
</body>
</HTML>