js 拉伸拖动iframe框架的简单示例

人气：1026 时间：2018-09-20

这篇文章主要为大家详细介绍了js 拉伸拖动iframe框架的简单示例，具有一定的参考价值，可以用来参考一下。

左边iframe放树目录，右边的iframe放index页。拖鼠标同时控制2个iframe的宽高。
期待有人能改进。
操作方法：鼠标指到2个iframe中间，可以水平拖，纵向拖(控制高度)
缺点：CSDN页面放开鼠标后才改大小，不占CPU资源。这个是实时改大小，所以速度太慢，希望有人来改改。我是不想弄了，反正又没用什么特别的技术。
提示：拖动的秘密就在filter:alpha(opacity=0)这一句,感兴趣的小伙伴，下面一起跟随四海网的小编罗X来看看吧。<br><strong>经测试代码如下：</strong>


<script language="javascript">
/**
 * 拉伸拖动iframe框架
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
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="http://www.q1010.com" style="width:200;height:610;position:absolute;z-index:9 "></iframe>
<div zindex=0 id='ab' onm ousemove='divonmousemove();' onm ouseleave='document.getElementById("ab").style.cursor='';' onm ousedown='divonmousedown();' onm ouseup='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="http://www.q1010.com" style="width:799;height:612;position:absolute;left:205;z-index:10"></iframe>
</body>
</html>

修改一：


<script language="javascript">
/**
 * 拉伸拖动iframe框架
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
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="www.q1010.com" style="width:100%;height:100%;z-index:9 "></iframe>
</td>
<td style="width:2px;cursor:e-resize;background-color:#cccccc;" onm ousedown="Resize_mousedown(event,this);"
onmouseup="Resize_mouseup(event,this);" onm ousemove="Resize_mousemove(event,this);">
</td>
<td>
<iframe zindex=1 id="b" name="ContentFrame" src="www.q1010.com" style="width:100%;height:100%;z-index:10"></iframe>
</td>
</tr>
</table>
</body>

修改二：


<script language="javascript">
/**
 * 拉伸拖动iframe框架
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
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="www.q1010.com" 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);" onm ouseup="Resize_mouseup(event,this);" onm ousemove="Resize_mousemove(event,this);">
<font style="size:3px;background-color:#eeeeee;cursor:pointer;" onm ousedown="Resize_setDefault(event,this);"><</font>
</td>
<td>
<iframe zindex=1 id="b" name="ContentFrame" src="www.q1010.com" style="width:100%;height:100%;z-index:10"></iframe>
</td>
</tr>
</table>
</body>

本文来自：http://www.q1010.com/174/468-0.html

注：关于js 拉伸拖动iframe框架的简单示例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：iframe

您可能感兴趣的文章

上一篇：js replace 、replaceall 用法简单示例

下一篇：js 下拉框二级关联菜单的简单示例