<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>显示拖动层例子</title>
</head>
<body>
<input type=button value="显示层" style="position:absolute; left:15; top:18" onclick="window.div1.style.display=''">
<div id = div1 style="position:absolute;z-index:1;display:none;width:148px;height=129px;background-color:#EEEEEE;border:1px solid black; left:90px; top:41px">
<table border="1" width="100%" id="table1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolorlight="#808080" bordercolordark="#808080" height="100%">
<tr>
<td style="font-size:9pt;" bgcolor="#C0C0C0" height="19" id =divTitle style="cursor:default;" width="94%">拖动我看看</td>
<td onclick="div1.style.display='none'" style="cursor:default" bgcolor="#808080" height="19" style="cursor:default;" width="5%" bordercolor="#000000">
<font color="#FFFFFF">×</font></td>
</tr>
<tr>
<td align=center colspan="2">哈哈，可以拖动！
</td>
</tr>
</table>
</div>
<script language="javascript">
<!--
var mX,mY,oX,oY;
window.divTitle.onmousedown=function(){
mX = parseInt(event.x,10);
mY = parseInt(event.y,10);
oX = parseInt(div1.style.left,10);
oY = parseInt(div1.style.top,10);
window.divTitle.setCapture();
window.divTitle.onmousemove=function(){
div1.style.left=oX + (parseInt(event.x,10) -mX);
div1.style.top=oY + (parseInt(event.y,10)-mY);
};
};
window.divTitle.onmouseup = function(){
divTitle.releaseCapture();
window.divTitle.onmousemove=null;
}
//-->
</script>
</body>
</html>
浙公网安备 33010602011771号