层的居顶拖动
<html>
<head>
<title>层操作...</title>
<script language="javascript">
//层的尺寸大小 右键
var mouseX = 0;
var mouseY = 0;
function divonmousemove(obj){
if (event.button==2)
{
if ((Math.abs(obj.offsetLeft+obj.offsetWidth-event.x)<14) && (Math.abs(obj.offsetTop+obj.offsetHeight-event.y)<14)) obj.style.cursor='se-resize';
else if (Math.abs(obj.offsetLeft+obj.offsetWidth-event.x)<14) obj.style.cursor='e-resize';
else if (Math.abs(obj.offsetTop+obj.offsetHeight-event.y)<14) obj.style.cursor='s-resize';
else obj.style.cursor='';
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.innerHTML="Width:"+obj.style.posWidth+",Height:"+obj.style.posHeight+"<br>Top:"+obj.style.posTop+",Left:"+obj.style.posLeft;
obj.filters.alpha.opacity=90;
}
}
function divonmousedown(obj){
if (event.button==2){mouseX = event.x;mouseY = event.y;}
}
function divonmouseup(obj){
if (event.button==2){obj.filters.alpha.opacity=100;mouseX = 0;mouseY = 0;}
}
//层的移动 左键
var Obj="",objX=0,objY=0;
document.onmouseup=MUp
document.onmousemove=MMove
function MDown(Object){
if (event.button==1){
Obj=Object.id
document.all(Obj).setCapture()
document.all(Obj).style.cursor="move";
pX=event.x-document.all(Obj).style.pixelLeft;
pY=event.y-document.all(Obj).style.pixelTop;
}
}
function MMove(){
if(Obj!="" && event.button==1){
document.all(Obj).style.left=event.x-pX;
document.all(Obj).style.top=event.y-pY;
objX=document.all(Obj).style.posLeft;
objY=document.all(Obj).style.posTop;
document.all(Obj).filters.alpha.opacity=70;
//document.all(Obj).innerHTML="Width:"+document.all(Obj).style.posWidth+",Height:"+document.all(Obj).style.posHeight+"<br>Top:"+objY+",Left:"+objX;
}
}
function MUp(){
if(Obj!="" && event.button==1){
document.all(Obj).filters.alpha.opacity=100;
document.all(Obj).style.cursor="";
document.all(Obj).releaseCapture();
Obj="";
}
}
function divZindex(obj){
var z_index1 = obj.style.zIndex; //获取当前z-index
var z_index = obj.style.zIndex; //获取当前z-index
for(var i = 0; i < document.getElementsByTagName("div").length; i++){ //获取最大z-index
if(z_index < document.getElementsByTagName("div")[i].style.zIndex){
z_index = parseInt(document.getElementsByTagName("div")[i].style.zIndex);
}
obj.style.zIndex = z_index+1; //移动后的z-index,而不是还原
}
}
</script>
</head>
<body oncontextmenu="javascript:return false" onselectstart ="javascript:return false">
<div id=la onmousemove="divonmousemove(this);MMove(this)" onmouseleave="this.style.cursor='';"
onmousedown="divZindex(this);divonmousedown(this);MDown(this)" onmouseup="divonmouseup(this);MUp(this)"
style="position: absolute;width:164px;height:114px;background:green;filter:alpha(opacity:100);z-index:2; left:10px; top:15px" title="拖动鼠标右键调整大小">
<table border="1" width="100%" height="100%" id="table1">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id=la0 onmousemove="divonmousemove(this);MMove(this)" onmouseleave="this.style.cursor='';"
onmousedown="divZindex(this);divonmousedown(this);MDown(this)" onmouseup="divonmouseup(this);MUp(this)"
style="position: absolute;width:164px;height:114px;background:#0000FF;filter:alpha(opacity:100);z-index:2; left:72px; top:42px" title="拖动鼠标右键调整大小">
<table border="1" width="100%" height="100%" id="table2">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
2006-10-06 15:45
