主页面中的两个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 相关文章推荐
跟我学习javascript的Date对象
Nov 19 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
Sea.JS知识总结
May 05 Javascript
layui弹出层效果实现代码
May 19 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 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/01/17 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
php类常量用法实例分析
2015/07/09 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
JavaScript实现简易计算器小功能
2020/10/22 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
解读! Python在人工智能中的作用
2017/11/14 Python
python实现飞机大战游戏
2020/10/26 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
心理咨询承诺书
2014/05/20 职场文书
小区推广策划方案
2014/06/06 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
污水处理保证书
2015/05/09 职场文书
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS