Put the iframe on the left to the tree directory, and the iframe on the right to the index page. Drag the mouse to control the width and height of the two iframe simultaneously.
We look forward to some improvements.
Operation Method: place the cursor in the middle of two iframe parameters, which can be dragged horizontally or vertically (height control)
Disadvantage: the size of the CSDN page is changed only after the mouse is opened, which does not occupy CPU resources. This is a real-time size change, so the speed is too slow. I hope someone will change it. I don't want to do it anymore. It's useless.
Tip: The secret of dragging is in the filter: alpha (opacity = 0) sentence.
<Html>
<Script language = "javascript">
Var mouseX = 0;
Var mouseY = 0;
Var w = 5;
Function divonmousemove (){
Obj1 = document. getElementById ("");
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;
Objs 12.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://community.csdn.net/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 = '';'
>
<Table style = "width: 100%; height: 100%;" border = 0 cellspacing = 0 cellpadding = 0px>
<Tr>
<Td style = "width: 150px;">
<Iframe zindex = 1 id = "a" src = "http://community.csdn.net/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://community.csdn.net/index.htm" style = "width: 100%; height: 100%; z-index: 10 "> </iframe>
</Td>
</Tr>
</Table>
</Body>