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

JavaScript 可移动层

    博客分类:
  • Util
阅读更多

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

分享到:
评论

相关推荐

    漂亮的js可移动弹出层

    "漂亮的js可移动弹出层"是利用JavaScript和jQuery技术实现的一种增强用户体验的交互设计。这种弹出层不仅美观,而且具有可移动性,允许用户根据需要自由调整其在屏幕上的位置。 JavaScript,简称JS,是一种轻量级的...

    javascript经典特效---可移动的层.rar

    本资源“javascript经典特效---可移动的层.rar”聚焦于JavaScript中的一个经典应用场景——可移动的层(也称为浮动窗口或拖动面板),这在网页设计中常用于创建用户友好的交互式元素。 在JavaScript中,实现可移动...

    jQuery弹出层 可移动层 提示框 浮动层

    在标题提及的案例中,"jQuery弹出层 可移动层 提示框 浮动层",意味着我们需要创建一个不仅可以显示信息,还可以通过用户手势移动的浮动窗口。为了实现这一功能,我们需要结合jQuery的选择器、事件处理和动画方法。...

    javascript经典特效---固定并可移动的层.rar

    以上就是利用JavaScript实现固定并可移动层的基本流程。通过这个例子,我们可以深入理解JavaScript在网页交互中的作用,以及如何结合CSS实现更丰富的用户界面动态效果。在实际开发中,还可以进一步优化,比如添加...

    JavaScript层移动透明定位

    例如,要创建一个可移动的层,我们首先需要设置元素的`position`属性: ```css #myLayer { position: absolute; top: 0; left: 0; } ``` 然后,我们可以使用JavaScript来改变层的位置。例如,当用户点击一个...

    js 特效 html 特效 固定并可移动的层

    js 特效 html 特效 固定并可移动的层 js 特效 html 特效 固定并可移动的层

    javascript经典特效---可移动的宣传层.rar

    标题中的“javascript经典特效---可移动的宣传层”暗示了这个压缩包可能包含了一个使用JavaScript实现的互动式网页效果,具体来说是一个可以被用户在页面上自由移动的宣传层。这种效果通常用于网站上的广告或者信息...

    JavaScript鼠标移动放大图片特效

    "JavaScript鼠标移动放大图片特效"是一种常见的网页交互功能,它允许用户在鼠标悬停在图片上时看到图片的放大效果,提升了浏览者的视觉体验。 实现这一特效主要涉及以下几个技术点: 1. **事件监听**:首先,我们...

    javascript经典特效---可移动的显示层.rar

    在JavaScript的世界里,"可移动的显示层"是一种常见的网页交互效果,它允许用户通过鼠标或其他交互方式在页面上自由移动一个元素,如一个信息框、提示窗口或对话框。这种效果广泛应用于各种Web应用程序,以提供更好...

    js弹出遮罩的可移动层

    "js弹出可移动的遮罩层"是一个典型的JavaScript技术应用,用于在网页上生成一个可移动的覆盖层,通常用于显示提示信息、加载进度或者进行用户确认操作。这种功能在各种浏览器中都需要保持良好的兼容性,包括IE、Fire...

    纯javascript 完美 无障碍层拖拽

    "javascript 层拖拽"这两个标签进一步明确了主题,强调我们将专注于JavaScript编程语言,特别是如何用它来实现可拖动的页面层或元素。 【文件解析】 "js拖拽+很强悍.html"这个文件名可能是一个包含示例代码和演示的...

    javascript层的多种实现

    JavaScript层的实现是Web开发中的一个重要概念,尤其是在构建复杂交互和动态用户界面时。JavaScript作为客户端脚本语言,它的...在实际项目中,开发者需要根据需求灵活运用这些知识,构建高效、可维护的JavaScript层。

    经典拖曳层移动层效果

    标题中的“经典拖曳层移动层效果”是指在网页中实现的一种交互功能,允许用户通过鼠标拖动来改变页面上某个元素的位置。这种效果常见于各种网页应用中,如窗口式对话框、可自定义布局的界面等。通过拖曳层移动层技术...

    可移动的div层,简单通用

    在网页设计和开发中,创建一个可移动的div层是一个常见的需求,这通常涉及到JavaScript或者CSS的交互式应用。标题“可移动的div层,简单通用”表明我们要讨论的是一个适用于多种情况、易于实现的解决方案,它允许...

    javascript拖动层类

    在JavaScript中,实现拖动层类的关键在于监听鼠标事件,包括`mousedown`(鼠标按下)、`mousemove`(鼠标移动)和`mouseup`(鼠标释放)。下面我们将深入探讨这些关键步骤: 1. **初始化设置**: 在创建拖动层类时...

    模式对话框(可刷新)+可移动div+遮罩层

    在"CustomDiv"这个文件中,我们可以推测这可能包含了一段代码示例,演示如何创建一个具有上述特性的对话框:可刷新的模式对话框、可移动的div以及遮罩层。实现这样的功能通常涉及到以下几个步骤: 1. **创建模式...

    JavaScript\JS\窗口类\牛B 用层模拟可移动的小窗口

    根据给定的文件信息,我们可以深入探讨如何使用HTML、CSS和JavaScript来创建一个可移动的窗口,这在网页设计和用户界面开发中是一项实用的技术。本文将详细解析代码中的关键概念,包括事件处理、样式控制以及DOM操作...

    asp.net购物车jquery cookie可移动模态层版

    ASP.NET购物车jQuery Cookie可移动模态层版是一款基于ASP.NET技术、jQuery库以及Cookie实现的轻量级静态购物车解决方案。此项目采用Visual Studio 2010作为开发工具,利用了jQuery的便利性和Cookie的持久化特性,...

    用层模拟可移动的小窗口

    在网页设计和开发中,"用层模拟可移动的小窗口"是一种常见的交互设计技术,它主要依赖于JavaScript(JS)来实现。JavaScript是Web开发中的重要脚本语言,用于增加网页的动态性和交互性。在这个场景中,"层"通常指的...

    JS可拖动窗口控件,可实现各种DIV窗口自定义及各种DIV弹出提示框 带遮罩层的DIV窗口/对话框控件 js javascript 对话框

    本资源提供了一种解决方案,它是一个基于JavaScript和CSS的可定制对话框控件,允许开发者创建具有遮罩层效果的浮动窗口,以增强用户体验。 首先,"可拖动窗口控件"是指用户可以通过鼠标在页面上拖动窗口的位置,这...

Global site tag (gtag.js) - Google Analytics