主页面中的两个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>

赞 (0)

相关推荐

  • 写了一个layout，拖动条连贯，内容区可为iframe

    写一个layout本来是一个很简单的事情,可这次的一个layout问题确让我为难了许久才做出来,下面来大概讲解一下问题的出现与解决过程. 注:本文代码皆基于jquery实现. 按照普通的方法写一个layout,一般是用一个table来实现,用中间的td拖动来控制左右两个td的大小,这个问题简单,很快就搞定.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

  • 一个刚完成的layout（拖动流畅，不受iframe影响）

    写一个layout本来是一个很简单的事情,可这次的一个layout问题确让我为难了许久才做出来,下面来大概讲解一下问题的出现与解决过程. 注:本文代码皆基于jquery实现. 按照普通的方法写一个layout,一般是用一个table来实现,用中间的td拖动来控制左右两个td的大小,这个问题简单,很快就搞定.代码如下: QUOTE: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/

  • javascript之可拖动的iframe效果代码

    // HISTORY// ------------------------------------------------------------------// Jan 23, 2004: Fixed problems which caused the script not to work in//               some framed situations. Improved browser support.//               Added easier "addH

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

    主页面中的两个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

  • 解决同一页面中两个iframe互相调用jquery,js函数的方法

    这一个月又没更新博客,唉,懒癌又犯了,今天解决了一个问题,关于两个iframe互相调用jquery函数方法 a.html中有两个iframe,如下: <iframe width="100%" height="100%" name="left" scrolling="auto" frameborder="0" src="b.html" id="left">&

  • iframe的onload在Chrome/Opera中执行两次Bug的解决方法

    复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>iframe的onload在Chrome/Opera中执行两次</title> </head> <body> <script> var ifr = document.createElement('iframe'); ifr.onload =

  • Angular在一个页面中使用两个ng-app的方法(二)

    在上篇文章给大家介绍了Angular在一个页面中使用两个ng-app的方法,这种方法不太推荐,下面给大家介绍方法二,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ng-app指令,angular找到第一个ng-app就不会再找了,在一个页面中只使用一个ng-app.</title>

  • AngularJS中比较两个数组是否相同

    Javascript不能直接用==或者===来判断两个数组是否相等,无论是相等还是全等都不行,以下两行JS代码都会返回false <script type="text/javascript"> alert([]==[]); alert([]===[]); </script> 要判断JS中的两个数组是否相同,需要先将数组转换为字符串,再作比较.以下两行代码将返回true <script type="text/javascript">

  • AngularJS中update两次出现$promise属性无法识别的解决方法

    AngularJS中update两次出现$promise属性无法识别的解决方法

    前言 本文主要介绍的是在AngularJS中update两次出现$promise属性无法识别的解决方法,下面话不多说,先来看看错误提示,然后再看看解决的办法吧. 一.错误信息如下: ERROR 2015-12-02 14:33:17,653 http-bio-8080-exec-42 o.s.s.r.i.e.InternalErrorExceptionMapper - Unrecognized field "$promise" (class com.inetpsa.fnd.rest.c

  • Angular在一个页面中使用两个ng-app的方法

    下面一段代码给大家介绍了Angular在一个页面中使用两个ng-app的方法,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ng-app指令,angular找到第一个ng-app就不会再找了,在一个页面中只使用一个ng-app.</title> </head> <b

  • 浅谈TreeSet中的两种排序方式

    直接上代码: package exercise1; public class Person implements Comparable{ private int id; private String name; public Person(int id, String name) { super(); this.id = id; this.name = name; } public int getId() { return id; } public void setId(int id) { th

  • js中 计算两个日期间的工作日的简单实例

    实例如下: //起始日期,/pattern/是正则表达式的界定符,pattern是要匹配的内容,只用于第一个符号的匹配,g为全局匹配标志 var beginDate = new Date("2013-01-01".replace(/-/g, "/")); //结束日期 var endDate = new Date("2013-01-31".replace(/-/g, "/")); //日期差值,即包含周六日.以天为单位的工时,

  • 零基础写python爬虫之urllib2中的两个重要概念：Openers和Handlers

    零基础写python爬虫之urllib2中的两个重要概念：Openers和Handlers

    在开始后面的内容之前,先来解释一下urllib2中的两个个方法:info / geturl urlopen返回的应答对象response(或者HTTPError实例)有两个很有用的方法info()和geturl() 1.geturl(): 这个返回获取的真实的URL,这个很有用,因为urlopen(或者opener对象使用的)或许会有重定向.获取的URL或许跟请求URL不同. 以人人中的一个超级链接为例, 我们建一个urllib2_test10.py来比较一下原始URL和重定向的链接: 复制代码

随机推荐