`
haiyupeter
  • 浏览: 418721 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

JavaScript 可移动层

    博客分类：
  • Util
HTML 
阅读更多

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

分享到：
| JavaSciprt数组（转）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics