<script>
var canmove=false;
var leftX=0,topY=0,newX=0,newY=0;
function showpx(){
var obj=document.getElementById("tbl1");
var objp=obj.offsetParent
alert("Top:" + obj.offsetTop + "Left:" +obj.offsetLeft + "px" + objp.offsetTop + "py" +
objp.offsetLeft );
}
function moveAble(){
if(event.srcElement.id=="moveArea")
canmove=true;
leftX=(event.clientX+document.body.scrollLeft)-wizard.style.pixelLeft;
topY=(event.clientY+document.body.scrollTop)-wizard.style.pixelTop;
//wizard.style.pixelLeft = wizard.offsetLeft;
//wizard.style.pixelTop = wizard.offsetTop;
//event.clientX,event.clientY:分别表示当前事件的鼠标在屏幕浏览区的位置
//wizard.style.pixelLeft,wizard.style.pixelTop: 表示指定元素的XY点的值
//wizard.offsetLeft | wizard.offsetLeft与
// wizard.style.pixelLeft | wizard.style.pixelTop的值相同,应该在一些场合下是不同的?
//注意大小写,
}
function moveDisable(){
canmove=false;
}
function move(){
if(canmove){
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
wizard.style.pixelLeft=newX-leftX;
wizard.style.pixelTop=newY-topY;
event.returnValue = false;
}
}
document.onmousedown=moveAble;
document.onmouseup=moveDisable;
document.onmousemove=move;
window.onresize=showpx;
</script>
<table id="wizard" cellspacing="0" style="position:absolute;left:300;top:150;background:#EEEEEE;border:1 solid
#CCCCCC">
<tr bgcolor="black" id="moveArea">
<td align="right" id="moveArea">
<font color='white'>最新消息</font>
</td>
<td align="right" id="moveArea">
<a href="#" onclick="wizard.style.display='none'"><font color='white'>[关闭]</font></a>
</td>
</tr>
<tr>
<td>
<img src='../images/girl_s.gif'>
</td>
<td valign="top"><br><br>
<a href='../news/MessView.net?IDMessage=11147'><b><font
color='red'>10月23日WINDOWS主机升级通知!</font></b><br>[2004-10-21]</a><br><a
href='../news/MessView.net?IDMessage=11060'><b><font
color='red'>CN代理价格再一次下调，低至行业之最！</font></b><br>[2004-10-18]</a><br><a
href='../news/MessView.net?IDMessage=11059'><b><font
color='red'>行业惊暴，买国家顶级CN域名送国际域名！</font></b><br>[2004-10-18]</a><br> </td>
</tr>
</table>
<table width='100%'>
<tr>
<td width='20%'>
<table id=tbl2><tr><td>test1</td></tr></table>
</td>
<td width='20%'>
<table id=tbl1><tr><td>test2</td></tr></table>
</td>
<td width='20%'>
<table id=tbl3><tr><td>test3</td></tr></table>
</td>
</tr>
</table>
