js 스 트 레 칭 드래그 iframe 의 구체 적 인 코드 구현
<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>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.