主页面中的两个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 相关文章推荐
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
AngularJS中的模块详解
Jan 29 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
Angular实现响应式表单
Aug 04 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 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
一次编写,随处运行
2006/10/09 PHP
linux php mysql数据库备份实现代码
2009/03/10 PHP
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
QUnit jQuery的TDD框架
2010/11/04 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
利用Python学习RabbitMQ消息队列
2015/11/30 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
python:print格式化输出到文件的实例
2018/05/14 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
python 元组的使用方法
2020/06/09 Python
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
工程造价专业大学生自荐信
2013/10/01 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
办公室岗位职责
2015/02/04 职场文书
会计试用期自我评价
2015/03/10 职场文书
红色革命电影观后感
2015/06/18 职场文书