javascript 层缩放问题(望得贵人帮忙)解决问题再加分,谢谢!

发布网友发布时间：2022-04-29 02:58

共1个回答

热心网友时间：2022-04-24 12:28

在firefox3和ie8中测试通过，加了个右边框。你自己运行看效果吧，随便说一下window.releaseEvents 在firefox3中不能运行了。你自己加个底部的边框就可以了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖动层</title>
</head>

<script language="javascript" >

var Browser_Name=navigator.appName;

var is_IE=(Browser_Name=="Microsoft Internet Explorer");

var x=0,y=0,x1=0,y1=0,xx=0,yy=0,xx1=0,yy1=0;
var moveable=false;
var index=10000;
var resizeable=false;
//开始拖动

function startDrag(obj,evt){
e=evt?evt:window.event;
if(true){
if (!window.captureEvents){
obj.setCapture();
}else{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
var win=obj.parentNode;//取得父窗体
win.style.zIndex=++index;//设置父窗体的Z轴值
x= e.clientX;//取得当前鼠标的X坐标
y= e.clientY;//取得当前鼠标的Y坐标
x1 = parseInt(win.style.left);//将父窗体的距浏览器左边界的距离转换为NUMBER
y1 = parseInt(win.style.top);//将父窗体的距浏览器上边界的距离转换为NUMBER
moveable=true;

}
}
function drag(evt){
e=evt?evt:window.event;
if(moveable){

var win=document.getElementById ("dialogbox");
win.style.left =x1+e.clientX-x;
win.style.top =y1+e.clientY-y;

}
}
//停止拖动
function stopDrag(event)
{
var obj=document.getElementById ("title");
if(moveable)
{

if (is_IE){
obj.releaseCapture();
}else{
e.preventDefault();
document.addEventListener("mouseup",stopDrag,true);
document.addEventListener("mousemove",drag, true);

}
moveable = false;
}
}

function Resizing(evt)
{
var e= evt ?evt: window.event;

if(resizeable){

var win=document.getElementById ("dialogbox");
win.style.width = x1+ e.screenX-x;
win.style.height =y1+ e.screenY-y;

}
}

//停止缩放
function stopResize(evt)
{
var obj=document.getElementById ("border");
if(resizeable)
{
if (is_IE){
obj.releaseCapture();
} else{
document.removeEventListener("mouseup",stopResize,true);
document.removeEventListener("mousemove",Resizing,true);

}
resizeable = false;
}

}
//开始缩放

function startResize (obj,evt){
var e=evt;

if (is_IE){
obj.setCapture();
}else{
e.preventDefault();
document.addEventListener("mouseup",stopResize,true);
document.addEventListener("mousemove",Resizing,true);

}
var win=obj.parentNode;//取得父窗体
win.style.zIndex=++index;//设置父窗体的Z轴值
x= e.screenX;//clientX;//取得当前鼠标的X坐标
y= e.screenY;//clientY;//取得当前鼠标的Y坐标
x1 = parseInt(win.style.width);
y1 = parseInt(win.style.height);
resizeable=true;

}

</script>
<body >
<div id="dialogbox" style="position:absolute; width:200px; height:200px; background-color:#99CCFF; z-index:200; top:100px; left:50px;">
<div id="title" onMouseDown="startDrag(this,event)" onMouseMove="drag(event)" onMouseUp="stopDrag(event)" style="width:100%; height:20px; background-color:#330033; top:0px; left:0px; z-index:200; position:absolute; font-size:9pt; color:#FFFFFF; padding-top:5px; padding-left:5px;">浮动窗口</div>

<div id="border" style="width:5px; height:100%; background-color:#00dd00; top:20px; left:150px; z-index:150; float:right;position:related;cursor:e-resize; " onMouseDown="startResize(this,event)" onMouseMove="Resizing(event)" onMouseUp="stopResize(event)"></div>

</div>

</body>
</html>