<html>
<head>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
(function ($) {
/**
* 居中
*/
$.fn.center = function (settings) {
var style = $.extend({
position: 'absolute', //absolute or fixed
top : '50%', //50%即居中，将应用负边距计算，溢出不予考虑了。
left : '50%',
zIndex : 2009,
relative: true //相对于包含它的容器居中还是整个页面
}, settings || {});
return this.each(function () {
var $this = $(this);
if (style.top == '50%') style.marginTop = -$this.outerHeight() / 2;
if (style.left == '50%') style.marginLeft = -$this.outerWidth() / 2;
if (style.relative && !$this.parent().is('body') && $this.parent().css('position') == 'static') $this.parent().css('position', 'relative');
delete style.relative;
//ie6
if (style.position == 'fixed' && $.browser.version == '6.0') {
style.marginTop += $(window).scrollTop();
style.position = 'absolute';
$(window).scroll(function () {
$this.stop().animate({
marginTop: $(window).scrollTop() - $this.outerHeight() / 2
});
});
}
$this.css(style);
});
};
/**
* 可移动
*/
$.fn.move = function (obj) {
var $win = obj;
var $title = $(this);
var b = false;
var x;
var y;
$title.css("cursor", "move");
$title.mousedown(
function (e) {
//x,y坐标是点击事件点和外该组件的距离差
b = true;
x = e.pageX - parseInt($win.position().left);
y = e.pageY - parseInt($win.position().top);
});
$(document).mousemove(
function (e) {
//只要不释放鼠标就可以拖动div
if (b) {
var divleft = e.pageX - x;
var divtop = e.pageY - y;
//设置拖动左，上位置
$win.css({ "left": divleft, "top": divtop });
}
}
).mouseup(function () {
b = false;
});
};
})(jQuery);
</script>
<script>
$(function(){
$(".div").center();
$(".title").move($(".div"));
});
</script>
<style>
.div{width:400px;height:300px;border:1px solid #F00}
.title{
width : 400px;
height : 30px;
background-color : green;
cursor : move;
margin-top : -1px;
}
</style>
</head>
<body>
<div class="div">
<h3 class="title">鼠标放到上边</h3>
</div>
</body>
</html>
分享到：
相关推荐
用jquery实现table拖拽列功能，可动态改变表格列宽度，并且实现table表格100%的问题，如果列缩小，则自动拉伸最后一列以实现table100%的效果，如果拉伸长度比原长度大，则显示x滚动条。
"jquery实现简单图片的拖动"这个主题是关于如何利用jQuery的API来实现图片元素的拖放功能，这是一个常见的交互设计，使得用户可以通过鼠标拖动图片在页面上自由移动。 在jQuery中，实现图片拖动主要涉及到`...
本文将详细讲解如何利用jQuery实现网格（Grid）中的列拖动功能，以及如何展示和压缩内容，以达到类似Excel的效果。 首先，我们需要引入jQuery库和jQuery Grid插件的相关文件。jQuery Grid通常基于jQuery UI，因此...
本文将深入探讨如何使用jQuery实现简单的拖拽效果，让你的网页元素能够随心所欲地移动。 首先，拖拽效果的核心在于捕获鼠标事件，包括`mousedown`（鼠标按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标释放）。...
在网页设计中，动态的用户交互体验...总之，“jQuery窗体拖动布局”技术利用jQuery的强大功能，结合HTML和CSS，可以轻松实现动态、可交互的页面布局。开发者可以通过学习和实践，进一步提高网站的用户友好性和吸引力。
3. JavaScript文件：包含了使用jQuery和Canvas API实现的拖动插件代码。 4. 图像资源：如果拖动的元素包含图片，这些资源可能会出现在压缩包中。 5. 示例或测试页面：展示插件功能的页面，可能包含不同类型的可拖动...
在这个“jQuery实现事件轴拖拽功能”的项目中，我们将探讨如何利用jQuery来实现用户界面中的元素拖拽功能，这在构建互动式时间轴或者日程管理应用时尤为常见。 首先，jQuery的`draggable()`函数是实现拖拽功能的...
实现jQuery拖拽功能的关键是使用`.draggable()`方法。这个方法为选定的元素添加拖拽行为。基础的使用方式如下： ```javascript $(function() { $("#elementId").draggable(); }); ``` 这里的`#elementId`是你想要...
在jQuery中实现弹出模态窗体，我们可以使用自定义的JavaScript代码或者依赖于现有的插件。一种常见的方法是利用HTML、CSS和JavaScript来构建模态窗体。首先，我们需要在HTML中创建一个隐藏的模态窗体元素，然后通过...
"jquery实现可拖动弹出层特效.zip"中的内容显然是关于使用jQuery来创建一个可拖动的弹出层效果，这是一种常见的用户界面元素，用于显示重要的信息或者进行交互操作。下面我们将深入探讨这个主题。 首先，让我们了解...
"jquery实现的鼠标拖拽改变块坐标"是一个典型的交互式网页特效，允许用户通过鼠标拖动来调整元素的位置，从而改变其在页面上的坐标。这个效果通常用于创建可自定义布局的应用或者游戏等。 首先，我们需要理解jQuery...
`使得图片相对于容器的中心点对齐，从而实现居中效果。 3. **jQuery动态计算**：虽然上述CSS可以处理大部分情况，但当图片宽高比与容器不同时，可能需要通过`jQuery`来动态调整图片的位置。首先，获取图片的真实...
本文将详细介绍如何使用jQuery实现弹出层的绝对居中。 首先，我们需要理解页面布局的基本概念。在HTML和CSS中，定位（positioning）是决定元素在页面上位置的关键。常见的定位方式有静态定位（static）、相对定位...
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
在本文中，我们将深入探讨如何使用jQuery库来实现滑块拖动功能以及与之相关的分数计算。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得前端开发变得更加便捷。 首先，我们需要...
在JavaScript和jQuery的世界里，实现元素的拖拽（Draggable）和吸附（Docking）功能是一项常见的需求，尤其是在创建交互式用户界面时。本篇将深入讲解如何利用这两种技术来增强网页的动态性和用户体验。 首先，...
2. **初始化DragSort**：在页面加载完成后，使用jQuery选择器找到可拖动的元素，并调用DragSort插件进行初始化。 3. **事件处理**：DragSort插件会自动处理拖放事件，包括开始拖动、拖动过程和释放等。开发者可以...
总的来说，jQuery结合`jquery-impromptu`插件为开发者提供了强大的工具来创建具有高度可定制性和交互性的弹出窗体。通过熟练掌握这些知识，你可以为你的网页添加更加友好和动态的用户体验。在实际项目中，可以根据...
【jQuery可拖动便签特效】是一种通过JavaScript库jQuery实现的交互式网页元素，它可以模拟现实生活中便签的可移动性，为用户带来更直观、更有趣的网页体验。这种特效通常用于创建提醒、记录备忘或者展示动态信息，极...