<!DOCTYPE html>
<html lang="zh">
<head>
<title>
jQuery拖动div、移动div、弹出层示例
</title>
<script src="http://www.codefans.net/ajaxjs/jquery-1.9.1.min.js" type="text/javascript">
</script>
<style type="text/css">
.moveBar {
position: absolute;
width: 250px;
height: 300px;
background: #666;
border: solid 1px #000;
right: 20px;
}
#banner {
background: #52CCCC;
cursor: move;
}
</style>
</head>
<body style="padding-top: 50px;">
<div class="moveBar">
<div id="banner">
按住这里可移动当前div
</div>
<div class="content">
弹出层的正文内容
</div>
</div>
<script>
var moveBar = ".moveBar";
var banner = "#banner";
jQuery(document).ready(function() {
$(banner).mousedown(function(event) {
var isMove = true;
var abs_x = event.pageX - $(moveBar).offset().left;
var abs_y = event.pageY - $(moveBar).offset().top;
$(document).mousemove(function(event) {
if (isMove) {
var obj = $(moveBar);
obj.css({
'left': event.pageX - abs_x,
'top': event.pageY - abs_y
});
}
}).mouseup(function() {
isMove = false;
});
});
});
</script>
</body>
</html>
分享到：
相关推荐
总结来说，这个示例展示了如何综合运用jQuery、CSS、iframe和umeditor来创建一个具有拖动功能的弹出层编辑器，提供了一种高效且灵活的Web交互方式。对于Web开发者来说，理解和掌握这些技术对于提升用户体验和项目...
标题中的“jQuery拖动div、移动div、弹出层实现原理及示例”表明了本文将介绍如何使用jQuery实现页面元素的拖动、移动以及弹出层效果。这些功能在网页交互设计中非常常见，能够让用户直接通过鼠标操作来改变页面元素...
本案例中提到的插件可能是通过创建一个可浮动的div元素来模拟弹出层效果，并通过jQuery事件监听和DOM操作实现弹出、隐藏以及拖动功能。 拖动特效的实现主要依赖于jQuery的`mousedown`、`mousemove`和`mouseup`事件...
以上就是关于“jQuery弹出div层窗口、div屏幕居中、背景滤镜效果和div拖拽效果”的核心知识点。通过熟练掌握这些技巧，开发者可以创建更富有互动性和用户体验的网页应用。在实际开发中，还需要根据不同的项目需求，...
在"Default.aspx"和"Default2.aspx"这两个页面中，可能就包含了使用jQuery实现弹出层的示例代码。"Web.config"是ASP.NET应用程序的配置文件，可能包含了jQuery库的引用设置。"51Aspx源码必读.txt"可能是关于阅读和...
在这个场景中，"jquery div 可拖拽弹出对话框" 指的是利用 jQuery 实现的一个功能，允许用户可以手动拖动 HTML 的 `div` 元素（通常用于创建对话框或模态窗口）在页面上自由移动。这种功能提高了用户体验，让用户...
本示例中的“jquery div容器拖拽放大缩小浮动层代码”是一个利用jQuery实现的功能，允许用户对div元素进行拖动、缩放以及使其在页面上浮动。下面将详细介绍这一功能的实现原理和相关知识点。 1. **jQuery选择器**：...
标题“弹出div拖动层”所指的就是这样一个功能，它允许用户通过鼠标来移动一个浮层div，这种功能常见于对话框、提示窗口或者自定义菜单等元素。下面我们将深入探讨这个主题，包括div的基本概念、拖动功能的实现以及...
标题中的“自己写的jquery 弹出层插件,可拖动”表明这是一个基于jQuery的自定义弹出框插件，具备拖动功能。在Web开发中，弹出层（也称为对话框或模态窗口）常用于显示警告、确认信息或者提供用户交互界面。这个插件...
在给定的标题“jquery拖拽排序插件div自由拖动排序代码”中，我们主要讨论的是如何利用jQuery实现一个功能，让用户能够自由地通过拖放操作来对页面上的div元素进行排序。这种功能在许多应用场景中都非常实用，比如...
首先，让我们了解jQuery弹出层的基本概念。弹出层通常指的是在用户与页面交互时，如点击按钮或链接，会在当前页面上弹出一个浮动窗口，显示额外的信息或功能。这种效果可以用来展示详细信息、表单、图片等，而不会...
对于“jQuery 拖动div层”这一主题，我们将深入探讨如何使用jQuery实现一个可拖动的div元素，使其在网页上可以被用户轻松移动。 首先，我们需要理解HTML中的`div`元素。`div`（division）是用于创建页面布局的基本...
此外，为了在移动设备上实现良好的触摸滑动体验，我们可以使用jQuery Mobile库，它提供了内置的滑动支持。或者，可以使用第三方库如Swiper.js或Slick.js，它们提供了更高级的功能和性能优化。 在实际项目中，你可能...
本文将深入探讨如何利用jQuery创建9种不同的弹出层效果，并提供实际应用示例。 ### 1. 简单的模态对话框 jQuery的`$.fn.modal()`插件可以轻松创建模态对话框。通过添加特定的CSS类和JavaScript事件，我们可以让一个...
jQuery弹出层插件在网页开发中非常常见，它们用于创建弹窗、模态对话框、图片预览等效果，增强了用户体验。以下是一些流行的jQuery弹出层插件及其特点： 1. **Thickbox**: Thickbox是一款轻量级的jQuery插件，用于...
<title>jQuery 拖动编辑div示例 <link rel="stylesheet" href="jquery-ui-personalized-1.6rc2.min.css"> <div id="draggable" class="ui-widget-content"> <!-- 这里放置div内容 --> </div> ...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件...在《用Jquery实现DIV锁屏并且可以拖拽DIV窗体代码页面.docx》文档中，你可以找到更详尽的代码示例和解释，以便进一步学习和应用。
在“jquery 拖拽div”的场景中，我们需要关注的是`mousedown`、`mousemove`和`mouseup`这三个与鼠标交互密切相关的事件。它们分别在鼠标按键按下、移动和释放时触发。 1. **初始化拖拽功能**： - 首先，我们需要...