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

왼쪽 iframe 은 트 리 디 렉 터 리 를 놓 고 오른쪽 iframe 은 index 페이지 를 놓 습 니 다.마 우 스 를 끌 면 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>