主页面中的两个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 中关于CSS操作部分使用说明
Jun 10 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
微信小程序实现按字母排列选择城市功能
Nov 25 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代码
2012/06/08 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
php接口技术实例详解
2016/12/07 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
Js注册协议倒计时的小例子
2013/06/24 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
Vue精简版风格概述
2018/01/30 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
javascript的this关键字详解
2019/05/20 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
Python中处理时间的几种方法小结
2015/04/09 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
蔻驰美国官网:COACH美国
2016/08/18 全球购物
C语言面试题
2013/05/19 面试题
机械制造专业个人的自我评价
2013/12/28 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
骨干教师申报材料
2014/12/17 职场文书
汶川大地震感悟
2015/08/10 职场文书
安全生产标语口号
2015/12/26 职场文书
推普标语口号大全
2015/12/26 职场文书
判断Python中的Nonetype类型
2021/05/25 Python