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


Posted in Javascript onApril 16, 2013
<%@ 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实现鼠标拖动改变其大小
Javascript 相关文章推荐
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
JavaScript prototype属性详解
Oct 25 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 #Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 #Javascript
jquery表格内容筛选实现思路及代码
Apr 16 #Javascript
js实现图片轮换效果代码
Apr 16 #Javascript
js相册效果代码(点击创建即可)
Apr 16 #Javascript
jQuery实现点击标题输入详细信息
Apr 16 #Javascript
jQuery图片的展开和收缩实现代码
Apr 16 #Javascript
You might like
用php将任何格式视频转为flv的代码
2009/09/03 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
linux下编译安装memcached服务
2014/08/03 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
Python selenium的基本使用方法分析
2019/12/21 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
详解python datetime模块
2020/08/17 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
化工工艺设计求职信
2014/06/25 职场文书
道路施工安全责任书
2014/07/24 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书