javascript + DIV +CSS 实现可拖动消息窗体

2022-07-15 80酷酷网 80kuku.com

　　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" onmousemove="aa(0);">鼠标移到上面试试看</div>
        <div id="div" onmousemove="grap(this);">
            <div solid red;position:absolute;right=1px;"><span color="#eee"><b>关闭</b></font></span></div>
            <span>I Like you ,do you know?
if you don`t know,now i tell you,i tell you!

透明窗体，可拖动</span>
        </div>
    </form>

</body>
</html>