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

js實現拉伸拖動iframe

2013-11-15 12:09:58  來源: JSP教程 

  左邊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=; 
>
< 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/20428.html
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.