主页面中的两个iframe实现鼠标拖动改变其大小

复制代码 代码如下:

  <%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm4.aspx.vb" Inherits="HIG_Receipt.WebForm4"%>

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

  <html>

  <head>

  <title>WebForm4</title>

  <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">

  <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">

  <meta name=vs_defaultClientScript content="JavaScript">

  <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">

  <style type=text/css >

  .resizeDivClass{

  width:3px;

  margin:0px 0 0px 0;

  background:#ffff33;

  border:5px;

  cursor:e-resize;

  </style>

  <script type=text/javascript language =javascript >

  var mousedown=false;

  var aaa;

  function down() {

  mousedown=true;

  aaa=event.clientX-td1.offsetWidth;

  event.srcElement.setCapture();

  }

  function move() {

  if(mousedown==true){

  td1.style.width=Math.max(1,event.clientX-aaa);

  }

  }

  function up() {

  event.srcElement.releaseCapture();

  mousedown=false;

  }

  </script>

  </head>

  <body MS_POSITIONING="GridLayout" >

  <TABLE width="100%" height="100%" >

  <tr>

  <td id="td1" >

  第一个iframe

  <iframe style="WIDTH: 100%; HEIGHT: 100%" src="" frameBorder="0">

  </iframe>

  </td>

  <td class="resizeDivClass" onmousedown="down()" onmousemove="move()" onmouseup="up()">

  </td>

  <td >

  第二个iframe

  <iframe style="WIDTH: 100%; HEIGHT: 100%" src="" frameBorder="0">

  </iframe>

  </td>

  </td>

  </table>

  </body>

  </html>

主页面中的两个iframe实现鼠标拖动改变其大小