怎么实现拖动中间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>
分享到：
相关推荐
禁止用拖动条的frame框架示例 ,50%"> <frame src="content_left.html" name="leftFrame"> <frame src="content_right.html" name="rightFrame"> ``` 在这个例子中，我们创建了一个两列的`frameset`，左边和...
"可以左右拖动的iframe框架"是一种创新的实现方式，它允许用户通过鼠标在水平方向上移动iframe，从而提供了更灵活的网页布局和用户体验。下面将详细讲解这个知识点。 **Iframe（Inline Frame）** 是HTML中的一个...
在本例程“跨frame拖拽对象实现”中，我们将深入探讨如何在不同的HTML框架（frames）之间实现这种交互。这个例子特别针对使用DotNet技术栈的开发者，它展示了如何利用JavaScript和.NET框架来创建这种跨frame的拖放...
在HTML中，框架（Frames）是通过`<frameset>`、`<frame>`等标签实现的，它们允许我们将一个网页分割成多个独立的部分，每个部分可以加载不同的网页内容。但是，静态的框架大小有时不能满足所有用户的需求，因此引入...
Bootstrap可视化框架实现拖动iframe是一种将交互性和灵活性引入网页设计的方法。Bootstrap，作为一款流行的前端开发框架，提供了丰富的样式和组件，使得开发者可以快速构建响应式、移动优先的网站。在本场景中，我们...
- **`noresize`**：表示用户是否可以通过拖动边框来调整框架的大小。如果设置为`noresize`，则用户无法调整框架大小。 - **`scrolling`**：表示框架内部是否显示滚动条。可选值包括： - `yes`：始终显示滚动条； ...
框架技术由框架集（Frameset）和框架（Frame）两部分组成。框架集是一个 HTML 文件，它定义了一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的 URL。 在 Dreamweaver 中，...
在jQuery中，实现frame之间的通信主要涉及到两个关键点：父框架（parent frame）和子框架（child frame）。在父框架中定义一个可供调用的公共方法，然后在子框架中调用这个方法。 1. **父框架中的方法定义：** ```...
2. 自由创建框架集：如果需要自定义框架结构，可以通过拖拽边框来创建不同形状和大小的框架。 3. 设置框架尺寸：调整各个框架的大小以适应内容。 4. 输入内容：在每个框架中添加或导入相应的网页内容。 5. 保存文件...
jQuery UI Frame Dialog是一款基于jQuery UI库的对话框插件，用于在网页中创建具有框架效果的弹出对话框。在官方1.1.2版本中，存在一个CSS加载问题，导致对话框的样式可能无法正常显示，影响了用户体验。这个问题在...
框架（Frame）则是框架集中的每个独立显示区域，它们之间可以通过链接相互关联，使得用户可以在不同框架中浏览内容而不影响其他框架。 框架的优势在于，它可以实现页面的独立更新和滚动，例如，一个框架可以固定...
在Delphi中，开发3D应用通常需要利用图形库或框架，例如OpenGL、DirectX或其他第三方库。Frame3D可能是这样一个库的自定义实现，或者是一个专门用于构建3D框结构的组件。Delphi自身并不内置3D图形处理能力，但可以...
2. **<frame> 标签**：`<frame>` 标签定义了框架的具体内容。每个 `<frame>` 都需要一个 `src` 属性来指定要加载的URL。还可以通过 `name` 属性为框架命名，以便在链接中引用它。例如： ```html <frame name="nav...
【标题】"zk a simple ajax frame" 指的是一种基于ZK框架构建的简单Ajax应用框架。ZK是一款开源的Java Web UI框架，它专为构建富客户端应用程序设计，尤其在处理用户交互方面表现出色。Ajax（Asynchronous ...
从压缩包的文件名称"frame"来看，这可能是一个框架的核心代码文件，包含了实现上述功能的HTML、CSS和JavaScript代码。开发者可能需要进一步研究这个文件，理解其结构和工作原理，以便于定制和应用到自己的项目中。 ...
1. **框架（Frame）**：框架是在浏览器窗口中显示独立网页的区域。每个框架都可以加载不同的HTML内容，且它们之间互不影响。 2. **框架集（Frameset）**：框架集是一个特殊的HTML文件，用于定义框架的布局。它可以将...
首先，框架由两个主要部分组成：框架（Frame）和框架集（Frameset）。框架是浏览器窗口中的一个独立区域，它可以显示与浏览器窗口其他部分不相关的HTML页面。而框架集则是一个特殊的HTML文件，用于定义浏览器窗口...