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 判断数组是否已包含了某个元素的函数
May 30 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
ionic实现底部分享功能
May 11 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
vue实现五子棋游戏
May 28 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
APMServ使用说明
2006/10/23 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
Python中的多重装饰器
2015/04/11 Python
Python pickle模块用法实例分析
2015/05/27 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
大学毕业后的十年规划
2014/01/07 职场文书
人事专员岗位说明书
2014/07/29 职场文书
安全标兵事迹材料
2014/08/17 职场文书
纪律教育月活动总结
2014/08/26 职场文书
党员个人公开承诺书
2014/08/29 职场文书
党校毕业心得体会
2014/09/13 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
房屋所有权证明
2015/06/19 职场文书
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android