关于Iframe和Frame框架的问题
我有一个框架结构的页面，分为上、左、右三个部分。需要在整个框架之上浮动一些窗口，还需要增加一些按钮什么的。使用Frame的时候不能在框架页面添加按钮、浮动窗口。如果把按钮、浮动窗口放到顶部页面又有可能被框架遮住。使用Iframe模拟Frame的结构，可以将按钮、浮动窗口都放在框架页面，但是框架不能拖动。于是参考一些程序，写了一个可以对左右框架进行拖动的函数，拖动是可以拖动了，但是，如果拖动时鼠标移动过快或者不平稳都会导致拖动不了，只有缓慢平稳拖动才行，不知道是怎么回事，大家帮忙看下。或者有没有办法实现我在顶部放一个浮动窗口，无论其多大都不会被Frame遮住。
Iframe程序如下：
Html:
<table style="WIDTH: 100%; HEIGHT: 100%" cellSpacing="0" cellPadding="0" border="0">
<tr>
<td id="frmTitle" style="WIDTH: 100%; HEIGHT: 84px" colSpan="3">
<IFRAME id="BoardTitle" style="VISIBILITY: inherit; WIDTH: 100%; HEIGHT: 100%"
name="main"src="top.html" frameBorder="0" scrolling="no"></IFRAME>
</td>
</tr>
<tr>
<td colspan="3">
<table cellSpacing="0" cellPadding="0" border="0" background="images/T7.gif">
<tr>
<td align="center" width="100%"></td>
</tr>
</table>
</td>
</tr>
<tr style="HEIGHT: 100%">
<td style="WIDTH: 125pt" id="frmTitle1" vAlign="middle" align="center">
<IFRAME id="BoardTitle1" style="VISIBILITY: inherit; WIDTH: 125pt; HEIGHT: 100%"
name="main" src="Left.html" frameBorder="0" scrolling="auto"></IFRAME>
</td>
<td style="WIDTH: 15px;CURSOR: w-resize" background="images/T8.jpg">
<table height="100%" cellSpacing="0" cellPadding="0" border="0">
<tr>
<td id="DragTd" style="WIDTH: 15px; HEIGHT: 100%" onmouseout='stopDrag();'
onmouseup='stopDrag();'onmousemove='drag();' onmousedown='startDrag();'>
</td>
</tr>
</table>
</td>
<TD width="100%">
<IFRAME id="rightFrame" style="VISIBILITY: inherit; WIDTH: 100%; HEIGHT: 100%"
name="rightFrame" src="Right.html" frameBorder="0" scrolling="auto"></IFRAME>
</TD>
</tr>
</table>
执行拖动的JavaScrip程序如下：
<script language="javaScript">
var dragObject = null;
//准备拖动
function startDrag()
{
if(window.event.srcElement.id == "DragTd")
{
dragObject=document.all("BoardTitle1")
//记录鼠标和层位置
x0 = event.clientX;
StyleWidth=document.all("BoardTitle1").style.width;
oldLeftWidth=parseInt(StyleWidth.substring(0,StyleWidth.length-2));
window.event.returnValue = false;
window.event.cancelBubble = true;
}
else {
dragObject = null;
}
}
//拖动
function drag()
{
if(dragObject)
{
newWidth=(oldLeftWidth + event.clientX - x0)+"px";
dragObject.style.width =newWidth;
window.event.returnValue = false;
indow.event.cancelBubble = true;
}
}
//停止拖动;
function stopDrag()
{
if(dragObject)
{
dragObject = null;
}
}
</script>
问题点数：50、回复次数：11Top
1 楼ybfqlyq（Rossy|http://blog.ybfq.com）回复于 2006-01-06 11:11:41 得分 0
看到好煩。。幫頂了。Top
2 楼noood（肥田）回复于 2006-01-06 11:24:04 得分 0
嘿嘿，谢谢帮顶
拖动的主要原理是记录鼠标移动的距离，据此改变左边页面的宽度。老是感觉拖动的时候不顺畅。
html中：
改变的左边页面是这个：
<IFRAME id="BoardTitle1" style="VISIBILITY: inherit; WIDTH: 125pt; HEIGHT: 100%"
name="main" src="Left.html" frameBorder="0" scrolling="auto"></IFRAME>
触发拖动的是这个：
<td id="DragTd" style="WIDTH: 15px; HEIGHT: 100%" onmouseout='stopDrag();'
onmouseup='stopDrag();'onmousemove='drag();' onmousedown='startDrag();'>Top
3 楼noood（肥田）回复于 2006-01-09 11:00:20 得分 0
没人啊Top
4 楼noood（肥田）回复于 2006-01-14 16:51:52 得分 0
还是没人，好吧，我承认，我是很罗嗦Top
5 楼laochake（老茶客）回复于 2006-01-14 17:41:45 得分 40
drag(); 和 stopDrag();应该由body的onmousemove和onmouseup触发执行
看看下面这段代码,对你应该有用:
<html><head><title>可拖动的层</title></head>
<body>
<script>
var popDivDiffX=null;
var popDivDiffY=null;
function popDivMoveStart(){
popDivDiffX=event.x-popDiv.style.pixelLeft;
popDivDiffY=event.y-popDiv.style.pixelTop;
window.document.body.attachEvent("onmousemove",popDivMove);
window.document.body.attachEvent("onmouseup",popDivMoveStop);
popDiv.setCapture();
}
function popDivMove(){
if(popDivDiffX!=null){
if(event.x<10 || event.y<10){//>防止出界
popDivMoveStop();
return;
}
popDiv.style.pixelLeft=event.x-popDivDiffX;
popDiv.style.pixelTop=event.y-popDivDiffY;
}
}
function popDivMoveStop(){
if(popDivDiffX != null){
popDiv.releaseCapture();
popDivDiffX=null;
popDivDiffY=null;
window.document.body.detachEvent("onmousemove",popDivMove);
window.document.body.detachEvent("onmouseup",popDivMoveStop);
}
}
</script>
<div id="popDiv" onmousedown="popDivMoveStart();" style="width:50px;height:50;position:absolute;left:50px;top:100px;background-color:blue;cursor:move;">
</div>
</body>
</html>Top
6 楼noood（肥田）回复于 2006-01-17 10:08:30 得分 0
太感谢laochake(老茶客)了，本来都不抱什么希望了。呵呵。我测试对比了一下，发现不止是需要使用body的onmousemove和onmouseup事件，在此同时需要有popDiv.setCapture();和popDiv.releaseCapture();两个语句才行，不然还是同样的情况。去网上查了一下，这两个函数是用来捕捉鼠标的移动的。但是具体怎么运行的，怎么会导致那样的差别还是不太清楚。Top
7 楼jojDarkAngel（joj）回复于 2006-01-17 14:17:55 得分 10
SetCapture
VB声明
Declare Function SetCapture Lib "user32" Alias "SetCapture" (ByVal hwnd As Long) As Long
说明
将鼠标捕获设置到指定的窗口。在鼠标按钮按下的时候，这个窗口会为当前应用程序或整个系统接收所有鼠标输入
返回值
Long，之前拥有鼠标捕获的窗口的句柄,
参数表
参数
hwnd Long，
类型及说明
要接收所有鼠标输入的窗口的句柄,
注解
我的理解：与ReleaseCapture函数一起使用，用于判断鼠标离开（mouseleave）事件
Top
8 楼jojDarkAngel（joj）回复于 2006-01-17 14:28:36 得分 0
ReleaseCapture
VB声明
Declare Function ReleaseCapture Lib "user32" Alias "ReleaseCapture" () As Long
说明
为当前的应用程序释放鼠标捕获
返回值
Long，TRUE（非零）表示成功，零表示失败
注解
我的理解：与SetCapture函数一起使用，用于判断鼠标离开（mouseleave）事件
Top
9 楼jojDarkAngel（joj）回复于 2006-01-17 14:29:27 得分 0
希望会对你有用。
Top
10 楼noood（肥田）回复于 2006-01-18 10:59:30 得分 0
呵呵，多谢，领教了。
看看laochake(老茶客)给的程序，在看看自己拼出来的程序，这就是差距啊！Top
11 楼zhjh5555（张）回复于 2006-02-23 15:49:44 得分 0
留个记号Top
