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

左边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>
 <iframe zindex=1 src="https://www.jb51.net/Tree/tree.htm"></iframe>
 <div zindex=0 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 src="https://www.jb51.net/index.htm"></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 >
< table border=0 cellspacing=0 cellpadding=0px >
< tr>
< td>
< iframe zindex=1 src="https://www.jb51.net/Tree/tree.htm"></iframe>
< /td>
< td onmousedown="Resize_mousedown(event,this);"
onmouseup="Resize_mouseup(event,this);" onmousemove="Resize_mousemove(event,this);">
< /td>
< td>
< iframe zindex=1 src="https://www.jb51.net/index.htm"></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 >
< table border=0 cellspacing=0 cellpadding=0px >
< tr>
< td >
< iframe zindex=1 src="https://www.jb51.net/Tree/tree.htm"></iframe>
< /td>
< td valign="middle"
onmousedown="Resize_mousedown(event,this);" onmouseup="Resize_mouseup(event,this);" onmousemove="Resize_mousemove(event,this);">
<font onmousedown="Resize_setDefault(event,this);"><</font>
< /td>
< td>
< iframe zindex=1 src="https://www.jb51.net/index.htm"></iframe>
< /td>
< /tr>
< /table>
< /body>

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdzpgx.html