JavaScript 可移动层

最新推荐文章于 2024-06-14 09:13:30 发布

最新推荐文章于 2024-06-14 09:13:30 发布 · 152 阅读

文章标签：

#HTML

Util 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个简单的自制可移动层的实现方法，通过JavaScript控制div元素的位置属性，使页面上的图层能够模拟弹出窗口的效果，并提供了完整的代码示例。

Ajax的兴起，造就了很多Web体验的产生，移动层即为其中一种产物，目的是让页面上的可以产生一个可以移动的图层，来模拟alert弹出窗口，让用户很平滑的在同一页面上进行操作。

网上参考代码：

<html>
    <head>
        <title>测试可移动层</title>
        <script>
            var mydiv = null;
            var x,y;
            var lefttemp,toptemp;
            function newDiv(){
                
            }
            
            function startDrag(){
                mydiv = document.getElementById("testDiv");
                lefttemp = mydiv.style.pixelLeft;
                toptemp = mydiv.style.pixelTop;
                x = event.clientX;
                y = event.clientY;
                document.onmousemove = drag;
                document.onmouseup = endDrag;
            }
            
            function endDrag(){
                document.onmousemove="";
                document.onmouseup="";
            }
            
            function drag(){
                mydiv.style.pixelLeft = lefttemp + event.clientX - x;
                mydiv.style.pixelTop = toptemp + event.clientY - y;
            }
        </script>
</head>
    <body>
        <div id="testDiv" style="width:392px; height:154px; background-color:#6633CC; position:absolute; left:60px; top:48px;">
          <table width="100%" height="26" border="0" cellpadding="0" cellspacing="0" bgcolor="#33FF33" onMouseDown="startDrag();">
            <tr>
              <td>&nbsp;</td>
            </tr>
          </table>
        </div>
    </body>
</html>

个人的尝试：

<html>
    <head>
        <title>测试可移动层</title>
        <script>
            var mydiv = null;
            var x,y;
            var lefttemp,toptemp;
            function newDiv(){
                
            }
            
            function startDrag(){
                mydiv = document.getElementById("testDiv");
                lefttemp = mydiv.style.pixelLeft;
                toptemp = mydiv.style.pixelTop;
                x = event.clientX;
                y = event.clientY;
                document.onmousemove = drag;
                document.onmouseup = endDrag;
            }
            
            function endDrag(){
                document.onmousemove="";
                document.onmouseup="";
            }
            
            function drag(){
                mydiv.style.pixelLeft = lefttemp + event.clientX - x;
                mydiv.style.pixelTop = toptemp + event.clientY - y;
            }
        </script>
</head>
    <body>
        <div id="testDiv" style="width:392px; height:154px; background-color:#6633CC; position:absolute; left:60px; top:48px;">
          <table width="100%" height="26" border="0" cellpadding="0" cellspacing="0" bgcolor="#33FF33" onMouseDown="startDrag();">
            <tr>
              <td>&nbsp;</td>
            </tr>
          </table>
        </div>
    </body>
</html>

虽然现在有像jQuery这么流行的前端库做移动层的支撑，但是如果不去琢磨一下的话，也许永远也不会知道其中的原理。