javascript + DIV +CSS 实现可拖动消息窗体
<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;}
</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:#ff00cc;width=100px;" onmousemove="aa(0);">鼠标移到上面试试看</div>
<div id="div" style="display:none" 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>
<span>I Like you ,do you know? <br>if you don`t know,now i tell you,i tell you!<br><br>透明窗体,可拖动</span>
</div>
</form>
</body>
</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;}
</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:#ff00cc;width=100px;" onmousemove="aa(0);">鼠标移到上面试试看</div>
<div id="div" style="display:none" 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>
<span>I Like you ,do you know? <br>if you don`t know,now i tell you,i tell you!<br><br>透明窗体,可拖动</span>
</div>
</form>
</body>
</html>
本程序测试通过,大家有好的方法可一起讨论!谢谢