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> </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> </td>
</tr>
</table>
</div>
</body>
</html>
虽然现在有像jQuery这么流行的前端库做移动层的支撑，但是如果不去琢磨一下的话，也许永远也不会知道其中的原理。
相关推荐
"漂亮的js可移动弹出层"是利用JavaScript和jQuery技术实现的一种增强用户体验的交互设计。这种弹出层不仅美观，而且具有可移动性，允许用户根据需要自由调整其在屏幕上的位置。 JavaScript，简称JS，是一种轻量级的...
本资源“javascript经典特效---可移动的层.rar”聚焦于JavaScript中的一个经典应用场景——可移动的层（也称为浮动窗口或拖动面板），这在网页设计中常用于创建用户友好的交互式元素。 在JavaScript中，实现可移动...
在标题提及的案例中，"jQuery弹出层 可移动层 提示框 浮动层"，意味着我们需要创建一个不仅可以显示信息，还可以通过用户手势移动的浮动窗口。为了实现这一功能，我们需要结合jQuery的选择器、事件处理和动画方法。...
以上就是利用JavaScript实现固定并可移动层的基本流程。通过这个例子，我们可以深入理解JavaScript在网页交互中的作用，以及如何结合CSS实现更丰富的用户界面动态效果。在实际开发中，还可以进一步优化，比如添加...
例如，要创建一个可移动的层，我们首先需要设置元素的`position`属性： ```css #myLayer { position: absolute; top: 0; left: 0; } ``` 然后，我们可以使用JavaScript来改变层的位置。例如，当用户点击一个...
js 特效 html 特效 固定并可移动的层 js 特效 html 特效 固定并可移动的层
标题中的“javascript经典特效---可移动的宣传层”暗示了这个压缩包可能包含了一个使用JavaScript实现的互动式网页效果，具体来说是一个可以被用户在页面上自由移动的宣传层。这种效果通常用于网站上的广告或者信息...
"JavaScript鼠标移动放大图片特效"是一种常见的网页交互功能，它允许用户在鼠标悬停在图片上时看到图片的放大效果，提升了浏览者的视觉体验。 实现这一特效主要涉及以下几个技术点： 1. **事件监听**：首先，我们...
在JavaScript的世界里，"可移动的显示层"是一种常见的网页交互效果，它允许用户通过鼠标或其他交互方式在页面上自由移动一个元素，如一个信息框、提示窗口或对话框。这种效果广泛应用于各种Web应用程序，以提供更好...
"js弹出可移动的遮罩层"是一个典型的JavaScript技术应用，用于在网页上生成一个可移动的覆盖层，通常用于显示提示信息、加载进度或者进行用户确认操作。这种功能在各种浏览器中都需要保持良好的兼容性，包括IE、Fire...
"javascript 层拖拽"这两个标签进一步明确了主题，强调我们将专注于JavaScript编程语言，特别是如何用它来实现可拖动的页面层或元素。 【文件解析】 "js拖拽+很强悍.html"这个文件名可能是一个包含示例代码和演示的...
JavaScript层的实现是Web开发中的一个重要概念，尤其是在构建复杂交互和动态用户界面时。JavaScript作为客户端脚本语言，它的...在实际项目中，开发者需要根据需求灵活运用这些知识，构建高效、可维护的JavaScript层。
标题中的“经典拖曳层移动层效果”是指在网页中实现的一种交互功能，允许用户通过鼠标拖动来改变页面上某个元素的位置。这种效果常见于各种网页应用中，如窗口式对话框、可自定义布局的界面等。通过拖曳层移动层技术...
在网页设计和开发中，创建一个可移动的div层是一个常见的需求，这通常涉及到JavaScript或者CSS的交互式应用。标题“可移动的div层，简单通用”表明我们要讨论的是一个适用于多种情况、易于实现的解决方案，它允许...
在JavaScript中，实现拖动层类的关键在于监听鼠标事件，包括`mousedown`（鼠标按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标释放）。下面我们将深入探讨这些关键步骤： 1. **初始化设置**： 在创建拖动层类时...
在"CustomDiv"这个文件中，我们可以推测这可能包含了一段代码示例，演示如何创建一个具有上述特性的对话框：可刷新的模式对话框、可移动的div以及遮罩层。实现这样的功能通常涉及到以下几个步骤： 1. **创建模式...
根据给定的文件信息，我们可以深入探讨如何使用HTML、CSS和JavaScript来创建一个可移动的窗口，这在网页设计和用户界面开发中是一项实用的技术。本文将详细解析代码中的关键概念，包括事件处理、样式控制以及DOM操作...
ASP.NET购物车jQuery Cookie可移动模态层版是一款基于ASP.NET技术、jQuery库以及Cookie实现的轻量级静态购物车解决方案。此项目采用Visual Studio 2010作为开发工具，利用了jQuery的便利性和Cookie的持久化特性，...
在网页设计和开发中，"用层模拟可移动的小窗口"是一种常见的交互设计技术，它主要依赖于JavaScript（JS）来实现。JavaScript是Web开发中的重要脚本语言，用于增加网页的动态性和交互性。在这个场景中，"层"通常指的...
本资源提供了一种解决方案，它是一个基于JavaScript和CSS的可定制对话框控件，允许开发者创建具有遮罩层效果的浮动窗口，以增强用户体验。 首先，"可拖动窗口控件"是指用户可以通过鼠标在页面上拖动窗口的位置，这...