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的可定制对话框控件,允许开发者创建具有遮罩层效果的浮动窗口,以增强用户体验。 首先,"可拖动窗口控件"是指用户可以通过鼠标在页面上拖动窗口的位置,这...