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

　　左边iframe放树目录，右边的iframe放index页。拖鼠标同时控制2个iframe的宽高。

　　期待有人能改进。

　　操作方法：鼠标指到2个iframe中间，可以水平拖，纵向拖(控制高度)

　　缺点：CSDN页面放开鼠标后才改大小，不占CPU资源。这个是实时改大小，所以速度太慢，希望有人来改改。我是不想弄了，反正又没用什么特别的技术。

　　提示：拖动的秘密就在filter:alpha(opacity=0)这一句

复制代码代码如下:

　　<html>

　　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>

　　<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>

　　</body>

　　</html>

　　修改一：

复制代码代码如下:

　　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.glzy8.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.glzy8.com/index.htm" style="width:100%;height:100%;z-index:10"></iframe>

　　< /td>

　　< /tr>

　　< /table>

　　< /body>

　　修改二：

复制代码代码如下:

　　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.glzy8.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);">

　　< /td>

　　< td>

　　< iframe zindex=1 id="b" name="ContentFrame" src="http://www.glzy8.com/index.htm" style="width:100%;height:100%;z-index:10"></iframe>

　　< /td>

　　< /tr>

　　< /table>

　　< /body>

教程首页更多教程