DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> js實現拉伸拖動iframe
js實現拉伸拖動iframe
編輯:JavaScript綜合知識     

 左邊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> 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved