<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的选择器、事件处理和CSS操作功能。 1. **创建HTML结构**： 首先，我们需要在HTML文档中定义模态窗口的结构。一个基本的模态窗口可能包括一个遮罩层和一个包含内容的...
这个实现方式简单且有效，但需要注意的是，由于使用了`$(document)`作为事件代理，所以当鼠标移动到模态窗体外部时，仍然能捕捉到`mousemove`事件，允许用户在页面任何地方拖动窗体。如果你希望限制拖动范围在模态...
在网页设计中，模拟窗口（窗体）是一种常见的交互元素，用于显示临时信息或进行用户交互操作。在不使用浏览器插件或者JavaScript框架的情况下，我们可以使用HTML、CSS和JavaScript原生技术来创建一个带有弹出层的...
-WindowPosition默认居中，而不是黄金分割位置。 +Button, Window等控件弹出位置属性的变化。 -Window的Target属性由字符串类型变为枚举类型，注意更新以前的代码：Target="_self" -> Target="Self", Target="_...
-WindowPosition默认居中，而不是黄金分割位置。 +Button, Window等控件弹出位置属性的变化。 -Window的Target属性由字符串类型变为枚举类型，注意更新以前的代码：Target="_self" -> Target="Self", Target="_...