js 스 트 레 칭 드래그 iframe 의 구체 적 인 코드 구현

6366 단어 js늘어나다iframe
왼쪽 iframe 은 트 리 디 렉 터 리 를 놓 고 오른쪽 iframe 은 index 페이지 를 놓 습 니 다.마 우 스 를 끌 면 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="https://www.jb51.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='';'
 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="https://www.jb51.net/index.htm" style="width:799;height:612;position:absolute;left:205;z-index:10"></iframe>
 </body>
  </html>
수정 1:

<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="https://www.jb51.net/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="https://www.jb51.net/index.htm" style="width:100%;height:100%;z-index:10"></iframe>
< /td>
< /tr>
< /table>
< /body>
수정 2:

<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="https://www.jb51.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="https://www.jb51.net/index.htm" style="width:100%;height:100%;z-index:10"></iframe>
< /td>
< /tr>
< /table>
< /body>

좋은 웹페이지 즐겨찾기