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

最新推荐文章于 2021-06-30 03:31:09 发布

zhihua_1983

最新推荐文章于 2021-06-30 03:31:09 发布

阅读量1.3k

点赞数

分类专栏： javascript 文章标签： div javascript css function html button

本文链接：https://blog.csdn.net/zhihua_1983/article/details/1469794

版权

javascript 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<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>