這篇文章介紹了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
=document
getElementById("a");
obj
=document
getElementById("b");
obj
=document
getElementById("ab");
if (mouseX!==event
x && mouseY!==event
y)obj
style
cursor=
se
resize
;
else if (mouseX!==event
x)obj
style
cursor=
e
resize
;
else if (mouseY!==event
y)obj
style
cursor=
s
resize
;
else obj
style
cursor=
;
if (event
button==
){
obj
style
width=parseInt(obj
offsetWidth)+(event
x
mouseX);
mouseX=event
x;
obj
style
height=parseInt(obj
offsetHeight)+(event
y
mouseY);
mouseY= event
y;
obj
style
width=
;
obj
style
left=obj
offsetWidth
obj
offsetWidth/
;
obj
style
height=obj
clientHeight;
obj
style
height=obj
clientHeight;
obj
style
left=obj
clientWidth+w;
obj
style
width=screen
width
obj
offsetWidth
w;
}}
function divonmousedown(){
mouseX = event
x;
mouseY = event
y;
}
function divonmouseup(){
obj
style
left=obj
offsetWidth;
obj
style
width=w;
mouseX =
;
mouseY =
;}
</script>
<body style=
margin:
>
<iframe zindex=
id="a" src=":
;height:
;position:absolute;z
index:
"></iframe>
<div zindex=
id=
ab
onmousemove=
divonmousemove();
onmouseleave=
document
getElementById("ab")
style
cursor=
;
onmousedown=
divonmousedown();
onmouseup=
divonmouseup();
style=
filter:alpha(opacity=
);width:
;height:
;background:#aaffaa;position:absolute;left:
;z
index:
title=
按下鼠標拖動大小
></div>
<iframe zindex=
id="b" name="ContentFrame" src=":
;height:
;position:absolute;left:
;z
index:
"></iframe>
</body>
</html>
修改一
復制代碼 代碼如下:
<script language="javascript">
var isResizing=false;
function Resize_mousedown(event
obj){
obj
mouseDownX=event
clientX;
obj
leftTdW=obj
previousSibling
offsetWidth;
obj
setCapture();
isResizing=true;
}
function Resize_mousemove(event
obj){
if(!isResizing) return ;
var newWidth=obj
leftTdW*
+event
clientX*
obj
mouseDownX;
if(newWidth>
) obj
previousSibling
style
width = newWidth;
else obj
previousSibling
style
width=
;
}
function Resize_mouseup(event
obj){
if(!isResizing) return;
obj
releaseCapture();
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:
%;z
index:
"></iframe>
< /td>
< td style="width:
px;cursor:e
resize;background
color:#cccccc;" onmousedown="Resize_mousedown(event
this);"
onmouseup="Resize_mouseup(event
this);" onmousemove="Resize_mousemove(event
this);">
< /td>
< td>
< iframe zindex=
id="b" name="ContentFrame" src=":
%;height:
%;z
index:
"></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
