js实现拉伸拖动iframe的具体代码


Posted in Javascript onAugust 03, 2013

左边iframe放树目录,右边的iframe放index页。拖鼠标同时控制2个iframe的宽高。
期待有人能改进。
操作方法:鼠标指到2个iframe中间,可以水平拖,纵向拖(控制高度)
缺点:CSDN页面放开鼠标后才改大小,不占CPU资源。 这个是实时改大小,所以速度太慢,希望有人来改改。我是不想弄了,反正又没用什么特别的技术。
提示:拖动的秘密就在filter:alpha(opacity=0)这一句

 <html>
<script language="javascript"> 
 var mouseX = 0; 
 var mouseY = 0;
 var w=5; 
 function divonmousemove(){ 
 obj1=document.getElementById("a");
 obj2=document.getElementById("b");
 obj12=document.getElementById("ab");
 if (mouseX!==event.x && mouseY!==event.y)obj12.style.cursor='se-resize'; 
 else if (mouseX!==event.x)obj12.style.cursor='e-resize'; 
 else if (mouseY!==event.y)obj12.style.cursor='s-resize'; 
 else obj12.style.cursor=''; 
 if (event.button==1){ 
 obj1.style.width=parseInt(obj1.offsetWidth)+(event.x - mouseX); 
 mouseX=event.x;
 obj1.style.height=parseInt(obj1.offsetHeight)+(event.y - mouseY); 
 mouseY= event.y; 
 obj12.style.width=108;
 obj12.style.left=obj1.offsetWidth-obj12.offsetWidth/2;
 obj12.style.height=obj1.clientHeight;
 obj2.style.height=obj1.clientHeight;
 obj2.style.left=obj1.clientWidth+w;
 obj2.style.width=screen.width-obj1.offsetWidth-w;
 }} 
function divonmousedown(){   
 mouseX = event.x; 
 mouseY = event.y;
 } 
function divonmouseup(){ 
 obj12.style.left=obj1.offsetWidth;
 obj12.style.width=w;
 mouseX = 0; 
 mouseY = 0;} 
 </script> 
 <body style='margin:0'>
 <iframe zindex=1 id="a" src="https://3water.com/Tree/tree.htm" style="width:200;height:610;position:absolute;z-index:9 "></iframe>
 <div zindex=0 id='ab' onmousemove='divonmousemove();' onmouseleave='document.getElementById("ab").style.cursor='';' 
 onmousedown='divonmousedown();' onmouseup='divonmouseup();' 
 style='filter:alpha(opacity=0);width:5;height:799;background:#aaffaa;position:absolute;left:200;z-index:100' title='按下鼠标拖动大小'></div>  
 <iframe zindex=1 id="b" name="ContentFrame" src="https://3water.com/index.htm" style="width:799;height:612;position:absolute;left:205;z-index:10"></iframe>
 </body>
  </html>

修改一:
<script language="javascript"> 
var isResizing=false;
function Resize_mousedown(event,obj){
obj.mouseDownX=event.clientX;
obj.leftTdW=obj.previousSibling.offsetWidth;
obj.setCapture();
isResizing=true;
}
function Resize_mousemove(event,obj){
if(!isResizing) return ;
var newWidth=obj.leftTdW*1+event.clientX*1-obj.mouseDownX;
if(newWidth>0) obj.previousSibling.style.width = newWidth;
else obj.previousSibling.style.width=1;
}
function Resize_mouseup(event,obj){
if(!isResizing) return;
obj.releaseCapture();
isResizing=false;
}
< /script> 
< body style='margin:0' >
< table style="width:100%;height:100%;" border=0 cellspacing=0 cellpadding=0px >
< tr>
< td style="width:150px;">
< iframe zindex=1 id="a" src="https://3water.com/Tree/tree.htm" style="width:100%;height:100%;z-index:9 "></iframe>
< /td>
< td style="width:2px;cursor:e-resize;background-color:#cccccc;" onmousedown="Resize_mousedown(event,this);" 
onmouseup="Resize_mouseup(event,this);" onmousemove="Resize_mousemove(event,this);">
< /td>
< td>
< iframe zindex=1 id="b" name="ContentFrame" src="https://3water.com/index.htm" style="width:100%;height:100%;z-index:10"></iframe>
< /td>
< /tr>
< /table>
< /body>

修改二:
<script language="javascript"> 
var isResizing=false;
function Resize_mousedown(event,obj){
obj.mouseDownX=event.clientX;
obj.leftTdW=obj.previousSibling.offsetWidth;
obj.setCapture();
isResizing=true;
}
function Resize_mousemove(event,obj){
if(!isResizing) return ;
var newWidth=obj.leftTdW*1+event.clientX*1-obj.mouseDownX;
if(newWidth>0) obj.previousSibling.style.width = newWidth;
else obj.previousSibling.style.width=1;
}
function Resize_mouseup(event,obj){
if(!isResizing) return;
obj.releaseCapture();
isResizing=false;
}
function Resize_setDefault(event,obj){
if(obj.innerText=="<") {
obj.parentNode.previousSibling.style.width=1;
obj.innerText=">";
}
else{
obj.parentNode.previousSibling.style.width=150;
obj.innerText="<";
}
event.cancelBubble=true;
}
< /script> 
< body style='margin:0' >
< table style="width:100%;height:100%;" border=0 cellspacing=0 cellpadding=0px >
< tr>
< td style="width:150px;" >
< iframe zindex=1 id="a" src="https://3water.com/Tree/tree.htm" style="width:100%;height:100%;z-index:9 "></iframe>
< /td>
< td style="width:3px;cursor:e-resize;background-color:#cccccc;" align="center" valign="middle"
onmousedown="Resize_mousedown(event,this);" onmouseup="Resize_mouseup(event,this);" onmousemove="Resize_mousemove(event,this);">
<font style="size:3px;background-color:#eeeeee;cursor:pointer;" onmousedown="Resize_setDefault(event,this);"><</font>
< /td>
< td>
< iframe zindex=1 id="b" name="ContentFrame" src="https://3water.com/index.htm" style="width:100%;height:100%;z-index:10"></iframe>
< /td>
< /tr>
< /table>
< /body>
Javascript 相关文章推荐
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 Javascript
js判断输入是否为数字的具体实例
Aug 03 #Javascript
js replace 与replaceall实例用法详解
Aug 03 #Javascript
jquery动态加载js三种方法实例
Aug 03 #Javascript
js innerHTML 改变div内容的方法
Aug 03 #Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 #Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 #Javascript
jQuery function的正确书写方法
Aug 02 #Javascript
You might like
PHP网站备份程序代码分享
2011/06/10 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
js的延迟执行问题分析
2014/06/23 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
Python数据结构之翻转链表
2017/02/25 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
如何基于python操作json文件获取内容
2019/12/24 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
浅析python 字典嵌套
2020/09/29 Python
JAVA中运算符的分类及举例
2015/09/12 面试题
大学四年规划书范文
2013/12/27 职场文书
舞蹈教师自荐信
2014/01/27 职场文书
构建高效课堂实施方案
2014/03/13 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
学校班班通实施方案
2014/06/11 职场文书
四风问题查摆材料
2014/08/25 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
python实现自动化群控的步骤
2021/04/11 Python
python实现简单区块链结构
2021/04/25 Python
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android