主页面中的两个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 相关文章推荐
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
不同Jquery版本引发的问题解决
Oct 14 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 Javascript
Javascript文本框脚本实现方法解析
Oct 30 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中3种方法删除字符串中间的空格
2014/03/10 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
python实现在控制台输入密码不显示的方法
2015/07/02 Python
python实现自动重启本程序的方法
2015/07/09 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
软件配置管理有什么好处
2015/04/15 面试题
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
第二课堂活动总结
2014/05/07 职场文书
工程售后服务方案
2014/06/08 职场文书
写得不错的求职信范文
2014/07/11 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
Vue全局事件总线你了解吗
2022/02/24 Vue.js