本文介绍了一种使用HTML、CSS及JavaScript实现的可拖动透明窗体的方法。通过鼠标事件控制窗体的位置，实现了窗体的自由移动功能。适用于网页中需要交互式浮动元素的场景。
<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>本程序测试通过，大家有好的方法可一起讨论！谢谢
扫一扫
667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
