主页面中的两个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 相关文章推荐
JavaScript去除空格的几种方法
Oct 03 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
javascript学习小结之prototype
Dec 03 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
原生js实现点击轮播切换图片
Feb 11 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新手上路(六)
2006/10/09 PHP
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
php读取excel文件的简单实例
2013/08/26 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
PHP最常用的正则表达式
2017/02/13 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
JS 类型转换常见方法小结
2010/05/31 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
简单的Python的curses库使用教程
2015/04/11 Python
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
python爬取51job中hr的邮箱
2016/05/14 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
python获取txt文件词向量过程详解
2019/07/05 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
工作人员思想汇报
2014/01/09 职场文书
企业承诺书怎么写
2014/05/24 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis