js实现拉伸拖动iframe的具体代码
这篇文章介绍了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 style='margin:0'> <iframe zindex=1 id="a" src="http://www.jbxue.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="http://www.jbxue.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="http://www.jbxue.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="http://www.jbxue.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="http://www.jbxue.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="http://www.jbxue.com /index.htm" style="width:100%;height:100%;z-index:10"></iframe> < /td> < /tr> < /table> < /body>
