左边iframe放树目录,右边的iframe放index页。拖鼠标同时控制2个iframe的宽高。期待有人能改进。操作方法:鼠标指到2个iframe中间,可以水平拖,纵向拖(控制高度)缺点:CSDN页面放开鼠标后才改大小,不占CPU资源。 这个是实时改大小,所以速度太慢,希望有人来改改。我是不想弄了,反正又没用什么特别的技术。提示:拖动的秘密就在filter:alpha(opacity=0)这一句 复制代码 代码如下: <BR> var mouseX = 0; <BR> var mouseY = 0;<BR> var w=5; <BR> function divonmousemove(){ <BR> obj1=document.getElementById("a");<BR> obj2=document.getElementById("b");<BR> obj12=document.getElementById("ab");<BR> if (mouseX!==event.x && mouseY!==event.y)obj12.style.cursor='se-resize'; <BR> else if (mouseX!==event.x)obj12.style.cursor='e-resize'; <BR> else if (mouseY!==event.y)obj12.style.cursor='s-resize'; <BR> else obj12.style.cursor=''; <BR> if (event.button==1){ <BR> obj1.style.width=parseInt(obj1.offsetWidth)+(event.x - mouseX); <BR> mouseX=event.x;<BR> obj1.style.height=parseInt(obj1.offsetHeight)+(event.y - mouseY); <BR> mouseY= event.y; <BR> obj12.style.width=108;<BR> obj12.style.left=obj1.offsetWidth-obj12.offsetWidth/2;<BR> obj12.style.height=obj1.clientHeight;<BR> obj2.style.height=obj1.clientHeight;<BR> obj2.style.left=obj1.clientWidth+w;<BR> obj2.style.width=screen.width-obj1.offsetWidth-w;<BR> }} <BR>function divonmousedown(){ <BR> mouseX = event.x; <BR> mouseY = event.y;<BR> } <BR>function divonmouseup(){ <BR> obj12.style.left=obj1.offsetWidth;<BR> obj12.style.width=w;<BR> mouseX = 0; <BR> mouseY = 0;} <BR> onmousedown='divonmousedown();' onmouseup='divonmouseup();' style='filter:alpha(opacity=0);width:5;height:799;background:#aaffaa;position:absolute;left:200;z-index:100' title='按下鼠标拖动大小'> 修改一: 复制代码 代码如下: <BR>var isResizing=false;<BR>function Resize_mousedown(event,obj){<BR>obj.mouseDownX=event.clientX;<BR>obj.leftTdW=obj.previousSibling.offsetWidth;<BR>obj.setCapture();<BR>isResizing=true;<BR>}<BR>function Resize_mousemove(event,obj){<BR>if(!isResizing) return ;<BR>var newWidth=obj.leftTdW*1+event.clientX*1-obj.mouseDownX;<BR>if(newWidth>0) obj.previousSibling.style.width = newWidth;<BR>else obj.previousSibling.style.width=1;<BR>}<BR>function Resize_mouseup(event,obj){<BR>if(!isResizing) return;<BR>obj.releaseCapture();<BR>isResizing=false;<BR>}<BR>< /script> <BR>< body style='margin:0' ><BR>< table style="width:100%;height:100%;" border=0 cellspacing=0 cellpadding=0px ><BR>< tr><BR>< td style="width:150px;"><BR>< iframe zindex=1 id="a" src="http://www.jb51.net/Tree/tree.htm" style="width:100%;height:100%;z-index:9 "><BR>< /td><BR>< td style="width:2px;cursor:e-resize;background-color:#cccccc;" onmousedown="Resize_mousedown(event,this);" <BR>onmouseup="Resize_mouseup(event,this);" onmousemove="Resize_mousemove(event,this);"><BR>< /td><BR>< td><BR>< iframe zindex=1 id="b" name="ContentFrame" src="http://www.jb51.net/index.htm" style="width:100%;height:100%;z-index:10"><BR>< /td><BR>< /tr><BR>< /table><BR>< /body><BR> 修改二: 复制代码 代码如下: <BR>var isResizing=false;<BR>function Resize_mousedown(event,obj){<BR>obj.mouseDownX=event.clientX;<BR>obj.leftTdW=obj.previousSibling.offsetWidth;<BR>obj.setCapture();<BR>isResizing=true;<BR>}<BR>function Resize_mousemove(event,obj){<BR>if(!isResizing) return ;<BR>var newWidth=obj.leftTdW*1+event.clientX*1-obj.mouseDownX;<BR>if(newWidth>0) obj.previousSibling.style.width = newWidth;<BR>else obj.previousSibling.style.width=1;<BR>}<BR>function Resize_mouseup(event,obj){<BR>if(!isResizing) return;<BR>obj.releaseCapture();<BR>isResizing=false;<BR>}<BR>function Resize_setDefault(event,obj){<BR>if(obj.innerText=="<") {<BR>obj.parentNode.previousSibling.style.width=1;<BR>obj.innerText=">";<BR>}<BR>else{<BR>obj.parentNode.previousSibling.style.width=150;<BR>obj.innerText="<";<BR>}<BR>event.cancelBubble=true;<BR>}<BR>< /script> <BR>< body style='margin:0' ><BR>< table style="width:100%;height:100%;" border=0 cellspacing=0 cellpadding=0px ><BR>< tr><BR>< td style="width:150px;" ><BR>< iframe zindex=1 id="a" src="http://www.jb51.net/Tree/tree.htm" style="width:100%;height:100%;z-index:9 "><BR>< /td><BR>< td style="width:3px;cursor:e-resize;background-color:#cccccc;" align="center" valign="middle"<BR>onmousedown="Resize_mousedown(event,this);" onmouseup="Resize_mouseup(event,this);" onmousemove="Resize_mousemove(event,this);"><BR><font style="size:3px;background-color:#eeeeee;cursor:pointer;" onmousedown="Resize_setDefault(event,this);"><<BR>< /td><BR>< td><BR>< iframe zindex=1 id="b" name="ContentFrame" src="http://www.jb51.net/index.htm" style="width:100%;height:100%;z-index:10"><BR>< /td><BR>< /tr><BR>< /table><BR>< /body><BR>