鼠标 拖动透明div
<html>
<head>
<style>
#div{
width:300px;
height:200px;
color=red;
border-top:1px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
size=13px;
position:absolute;
bottom:50px;
right=80px;
CURSOR: hand;
}
</style>
</head>
<body>
<script language="javascript">
var moveable = false;
function aa(val)
{
var obj = document.getElementById("div");
if(val == 0)
{
obj.style.display="";
var x,y;
x = event.clientX;
y = event.clientY;
obj.style.left=x;
obj.style.top=y;
//alert("X:"+x+"Y:"+y);
}
else
obj.style.display="none";
}
function startgrap(obj)
{
if(event.button==1)
{
obj.setCapture();
//记录鼠标和层位置;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(obj.style.left);
y1 = parseInt(obj.style.top);
moveable = true;
}
}
function stopgrap(obj)
{
if(moveable)
{
obj.releaseCapture();//用来释放对鼠标的捕捉
moveable = false;
}
}
function grap(obj)
{
if(moveable)
{
obj.style.left = x1 + event.clientX - x0;
obj.style.top = y1 + event.clientY - y0;
}
}
</script>
<form id="form1">
<input type=button value="DIV应用" onmousemove="aa(0);">
<div id="div2" style="background:green;width=50px;" onmousemove="aa(0);">鼠标移到上面试试看</div>
<div id="div" style="display:none; left: 0px; bottom: 50px;" onmousedown="startgrap(this);" onmouseup="stopgrap(this);" onmousemove="grap(this);">
<div style="border-top:1px solid red;position:absolute;right=1px;"><span onclick="aa(1);" style="cursor:hand"><font color="#eee"><b>关闭</b></font></span></div>
好久没有你的信好久没有人陪我谈心怀念你柔情似水的眼睛那是我天空最美丽的星星异乡的午夜特别冷清一个男人和一颗热切的信不知道远方的你是否能感应-----RevengeBoy
<br />
<span><br>
透明窗体，可拖动</span>
<br />
Test!!!</div>
</form>
</body>
</html>
posted on 2007-06-29 17:18 RevengeBoy 阅读(645) 评论(1) 编辑 收藏 举报
