首頁 > 開發者 > JavaScript

js實現展開拖動iframe

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

 左邊iframe放樹目錄，右邊的iframe放index頁。拖滑鼠同時控制2個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="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> 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More