主页面中的两个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 相关文章推荐
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
jQuery实现的placeholder效果完整实例
Aug 02 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
layui使用label标签的方法
Sep 14 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 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常用image图像函数集
2013/06/24 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
python读取和保存视频文件
2018/04/16 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
Python封装原理与实现方法详解
2018/08/28 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
python函数的作用域及关键字详解
2019/08/20 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
班长岗位职责
2013/11/10 职场文书
车间班长岗位职责
2013/11/30 职场文书
结婚典礼证婚词
2014/01/08 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
Redis分布式锁Redlock的实现
2021/08/07 Redis
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android