这篇文章介绍了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>
