使用iframe和table模拟frameset的resize功能.html

Posted on 2007-11-15 23:54 focus 阅读(1441) 评论(0) 编辑收藏举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>iframe和table模拟frameset的resize功能</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<table id="main" style="width:100%; height:100%" cellSpacing="0" cellPadding="0" border="0">
<tr>
<td style="width:125px" id="tdLeft">
<iframe id="ifmLeft" style="width:125px; height:100%" src="http://www.google.com" frameBorder="0" scrolling="auto"></iframe>
</td>
<td id="tdResizer" style="width:2px; cursor:e-resize; background-color:#A1C7F9;"> </td>
<td width="100%">
<iframe id="ifmRight" style="width:100%; height:100%" src="http://www.baidu.com" frameBorder="0" scrolling="auto"></iframe>
</td>
</tr>
</table>
<script language="javaScript">  
  var theResizeObj = null;  //代表一个 resizeObject() 的实例 This gets a value as soon as a resize start
  function resizeObject() 
  {
 this.target = null;   //需要 resize 的 object
 //this.dir = "";      //移动方向 type of current resize (n, s, e, w, ne, nw, se, sw)
 this.mouseOld_X = null;     //鼠标移动时初始 x 坐标
 this.mouseOld_Y = null;  //鼠标移动时初始 y 坐标
 this.oldWidth = null;  //需要 resize 的 object 初始 width
 this.oldHeight = null;  //需要 resize 的 object 初始 height
 //this.oldLeft = null;  //定位用的
 //this.oldTop = null;
 this.xMin = 1;    //The smallest width possible
 this.yMin = 1;    //The smallest height possible
 this.xMax = window.screen.availWidth * 0.95; //the max width possible
  }
  //准备拖动   
  function resizeStart()   
  {   
    if(window.event.srcElement.id == "tdResizer")   
    {
  theResizeObj = new resizeObject();
  theResizeObj.target = document.all("ifmLeft");
  theResizeObj.mouseOld_X = event.clientX;
  theResizeObj.oldWidth = theResizeObj.target.offsetWidth;
    }   
    else   
 {
  theResizeObj = null;
 }
 window.event.returnValue = false;   
 window.event.cancelBubble = true;  
    document.all('tdResizer').setCapture();
  }   
  //拖动     
  function resize()   
  {
 if(theResizeObj != null)
 {
  var newWidth = theResizeObj.oldWidth + window.event.clientX - theResizeObj.mouseOld_X;
  newWidth = Math.min(newWidth, theResizeObj.xMax);
  newWidth = Math.max(newWidth, theResizeObj.xMin);
  theResizeObj.target.style.width = newWidth + "px";
 }
 window.event.returnValue = false;   
 window.event.cancelBubble = true;   
  }   
  //停止拖动;   
  function resizeStop()   
  {
   if(theResizeObj != null)
   {
  theResizeObj = null;
   }
   //释放鼠标拖动
   document.all('tdResizer').releaseCapture();
  }
  document.onmousedown = resizeStart;
  document.onmousemove = resize;
  document.onmouseup   = resizeStop;
  
  </script>
</BODY>
</HTML>

参考资料:
http://www.gimoo.net/html/manual/%E5%A4%9A%E5%AA%92%E4%BD%93%E4%B8%8E%E7%BB%BC%E5%90%88%E6%8A%80%E5%B7%A7/%E5%8A%A8%E6%80%81%E6%94%B9%E5%8F%98%E5%AE%B9%E5%99%A8%E5%A4%A7%E5%B0%8F.htm
(注意:他的脚本挂了马,请小心使用.下面是安全的脚本)
genresize.js

刷新页面返回顶部

focus 专栏

公告

使用iframe和table模拟frameset的resize功能.html