主页面中的两个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 相关文章推荐
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
JavaScript工具库之Lodash详解
Jun 15 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 面试碰到过的问题 在此做下记录
2011/06/09 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
简单解决Python文件中文编码问题
2015/11/22 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
windows系统下Python环境搭建教程
2017/03/28 Python
用Eclipse写python程序
2018/02/10 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
django框架自定义用户表操作示例
2018/08/07 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
美的官方商城:Midea
2016/09/14 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
亿企通软件测试面试题
2012/04/10 面试题
文秘专业自荐信
2013/10/14 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
计算机专业求职信
2014/06/02 职场文书
中考学习决心书
2015/02/04 职场文书