熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

js實現拉伸拖動iframe的具體代碼

2013-11-15 11:59:51  來源: JSP教程 
這篇文章介紹了js實現拉伸拖動iframe的具體代碼有需要的朋友可以參考一下  

  左邊iframe放樹目錄右邊的iframe放index頁拖鼠標同時控制個iframe的寬高
期待有人能改進
操作方法鼠標指到個iframe中間可以水平拖縱向拖(控制高度)
缺點CSDN頁面放開鼠標後才改大小不占CPU資源 這個是實時改大小所以速度太慢希望有人來改改我是不想弄了反正又沒用什麼特別的技術
提示拖動的秘密就在filter:alpha(opacity=)這一句

復制代碼 代碼如下:
 <html>
<script language="javascript">
 var mouseX = ;
 var mouseY = ;
 var w=;
 function divonmousemove(){
 obj=documentgetElementById("a");
 obj=documentgetElementById("b");
 obj=documentgetElementById("ab");
 if (mouseX!==eventx && mouseY!==eventy)objstylecursor=seresize;
 else if (mouseX!==eventx)objstylecursor=eresize;
 else if (mouseY!==eventy)objstylecursor=sresize;
 else objstylecursor=;
 if (eventbutton==){
 objstylewidth=parseInt(objoffsetWidth)+(eventx mouseX);
 mouseX=eventx;
 objstyleheight=parseInt(objoffsetHeight)+(eventy mouseY);
 mouseY= eventy;
 objstylewidth=;
 objstyleleft=objoffsetWidthobjoffsetWidth/;
 objstyleheight=objclientHeight;
 objstyleheight=objclientHeight;
 objstyleleft=objclientWidth+w;
 objstylewidth=screenwidthobjoffsetWidthw;
 }}
function divonmousedown(){  
 mouseX = eventx;
 mouseY = eventy;
 }
function divonmouseup(){
 objstyleleft=objoffsetWidth;
 objstylewidth=w;
 mouseX = ;
 mouseY = ;}
 </script>
 <body style=margin:>
 <iframe zindex= id="a" src=":;height:;position:absolute;zindex: "></iframe>
 <div zindex= id=ab onmousemove=divonmousemove(); onmouseleave=documentgetElementById("ab")stylecursor=;
 onmousedown=divonmousedown(); onmouseup=divonmouseup();
 style=filter:alpha(opacity=);width:;height:;background:#aaffaa;position:absolute;left:;zindex: title=按下鼠標拖動大小></div> 
 <iframe zindex= id="b" name="ContentFrame" src=":;height:;position:absolute;left:;zindex:"></iframe>
 </body>
  </html>

  
修改一

復制代碼 代碼如下:
<script language="javascript">
var isResizing=false;
function Resize_mousedown(eventobj){
objmouseDownX=eventclientX;
objleftTdW=objpreviousSiblingoffsetWidth;
objsetCapture();
isResizing=true;
}
function Resize_mousemove(eventobj){
if(!isResizing) return ;
var newWidth=objleftTdW*+eventclientX*objmouseDownX;
if(newWidth>) objpreviousSiblingstylewidth = newWidth;
else objpreviousSiblingstylewidth=;
}
function Resize_mouseup(eventobj){
if(!isResizing) return;
objreleaseCapture();
isResizing=false;
}
< /script>
< body style=margin: >
< table style="width:%;height:%;" border= cellspacing= cellpadding=px >
< tr>
< td style="width:px;">
< iframe zindex= id="a" src=":%;height:%;zindex: "></iframe>
< /td>
< td style="width:px;cursor:eresize;backgroundcolor:#cccccc;" onmousedown="Resize_mousedown(eventthis);"
onmouseup="Resize_mouseup(eventthis);" onmousemove="Resize_mousemove(eventthis);">
< /td>
< td>
< iframe zindex= id="b" name="ContentFrame" src=":%;height:%;zindex:"></iframe>
< /td>
< /tr>
< /table>
< /body>

  
修改二

復制代碼 代碼如下:

  
<script language="javascript">
var isResizing=false;
function Resize_mousedown(eventobj){
objmouseDownX=eventclientX;
objleftTdW=objpreviousSiblingoffsetWidth;
objsetCapture();
isResizing=true;
}
function Resize_mousemove(eventobj){
if(!isResizing) return ;
var newWidth=objleftTdW*+eventclientX*objmouseDownX;
if(newWidth>) objpreviousSiblingstylewidth = newWidth;
else objpreviousSiblingstylewidth=;
}
function Resize_mouseup(eventobj){
if(!isResizing) return;
objreleaseCapture();
isResizing=false;
}
function Resize_setDefault(eventobj){
if(objinnerText=="<") {
objparentNodepreviousSiblingstylewidth=;
objinnerText=">";
}
else{
objparentNodepreviousSiblingstylewidth=;
objinnerText="<";
}
eventcancelBubble=true;
}
< /script>
< body style=margin: >
< table style="width:%;height:%;" border= cellspacing= cellpadding=px >
< tr>
< td style="width:px;" >
< iframe zindex= id="a" src=":%;height:%;zindex: "></iframe>
< /td>
< td style="width:px;cursor:eresize;backgroundcolor:#cccccc;" align="center" valign="middle"
onmousedown="Resize_mousedown(eventthis);" onmouseup="Resize_mouseup(eventthis);" onmousemove="Resize_mousemove(eventthis);">
<font style="size:px;backgroundcolor:#eeeeee;cursor:pointer;" onmousedown="Resize_setDefault(eventthis);"><</font>
< /td>
< td>
< iframe zindex= id="b" name="ContentFrame" src=":%;height:%;zindex:"></iframe>
< /td>
< /tr>
< /table>
< /body>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20048.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.