首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

施用iframe和table模拟frameset的resize功能

2012-08-21 
使用iframe和table模拟frameset的resize功能!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//

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

<!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="sss.html" 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="sss.html" 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>

热点排行