JavaScript 可移动层

最新推荐文章于 2019-07-30 11:56:37 发布

iteye_21250

最新推荐文章于 2019-07-30 11:56:37 发布

阅读量116

点赞数

分类专栏： Util 文章标签： HTML

Util 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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.οnmοusemοve="";
                document.οnmοuseup="";
            }
            
            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.οnmοusemοve="";
                document.οnmοuseup="";
            }
            
            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这么流行的前端库做移动层的支撑，但是如果不去琢磨一下的话，也许永远也不会知道其中的原理。

iteye_21250

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 可移动层

Ajax的兴起，造就了很多Web体验的产生，移动层即为其中一种产物，目的是让页面上的可以产生一个可以移动的图层，来模拟alert弹出窗口，让用户很平滑的在同一页面上进行操作。网上参考代码：&lt;html&gt; &lt;head&gt; &lt;title&gt;测试可移动层&lt;/title&gt; &lt;script...
复制链接

扫一扫

专栏目录