现在的位置: 首页 > 综合 > 正文

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

2013年06月06日 ⁄ 综合 ⁄ 共 1254字 ⁄ 字号 评论关闭
<%@ 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>

抱歉!评论已关闭.