|
<html>
<head>
<title></title>
<script src="jquery-1.8.2.js"></script>
<style type="text/css">
.popWindow {
/*#9D9D9D;*/
width: 100%; /*把整个页面用这个div罩起来*/
height: 100%;
left: 0;
top: 0;
filter: alpha(opacity=50);
opacity: 0.5; /*设置透明度，可以看到却无法操作*/
z-index: 1; /*z-index 数值大的div在最上面*/
position: absolute;
}
.maskLayer {
width: 200px;
height: 30px;
line-height: 30px;
left: 50%;
top: 50%;
color: #fff;
z-index: 2;
position: fixed;
text-align: center;
}
</style>
<script language="javascript" type="text/javascript">
function showDiv() {
$("#popWindow").show();//蒙版层divshow，
$("#maskLayer").show();//可操作层show
}
function closeDiv() {
$("#popWindow").hide();//蒙版层divshow，
$("#maskLayer").hide();//可操作层show
}
//===========================
$(function () {
moveModalDiv();
});//加载完毕
//可移动蒙版层出现的div
function moveModalDiv() {
var moveDiv = false; var x; var y;
$("#maskLayer").mousedown(function () {//点下鼠标
moveDiv = true;
$("#maskLayer").css("cursor","move");
x = event.x - $("#maskLayer").offset().left;
y = event.y - $("#maskLayer").offset().top;
});
$("#maskLayer").mouseup(function () {//鼠标起来
moveDiv = false;
$("#boolDiv").text(moveDiv);
});
$("#maskLayer").mouseleave(function () {//鼠标离开 因为迅速滑动的时候，有时无法触发 mouseup所以加上这个事件
moveDiv = false;
$("#boolDiv").text(moveDiv);
});
$("#maskLayer").mousemove(function () {//移动鼠标
if (moveDiv == true) {
$("#boolDiv").text(moveDiv);
$("#maskLayer").css({ "position": "absolute", "left": event.x - x, "top": event.y - y });
}
else {
$("#boolDiv").text(moveDiv);
}
});
}
</script>
</head>
<body>
<div onclick="showDiv()" style="display:block; cursor:pointer">
弹出蒙板
</div>
<div id="popWindow" class="popWindow" style="display: none;">
</div>
<div id="maskLayer" class="maskLayer" style="display: none;">
<a href="#" onclick="closeDiv()" style="cursor:pointer;text-decoration: none;" >
关闭蒙板
</a>
<div id="boolDiv"></div>
</div>
</body>
</html>
--------------------------------移动 <!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Qing's Web</title>
<script src="jquery-1.8.2.js"></script>
<style type="text/css">
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
.moveBar {
position: absolute;
width: 250px;
height: 300px;
background: #666;
border: solid 1px #000;
}
#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>
<div class="footer">
<p align="center" class="label">ALL Rights Reserved Qing 版权所有</p>
</div>
<script>
jQuery(document).ready(
function () {
$('#banner').mousedown(
function (event) {
var isMove = true;
var abs_x = event.pageX - $('div.moveBar').offset().left;
var abs_y = event.pageY - $('div.moveBar').offset().top;
$(document).mousemove(function (event) {
if (isMove) {
var obj = $('div.moveBar');
obj.css({ 'left': event.pageX - abs_x, 'top': event.pageY - abs_y });
}
}
).mouseup(
function () {
isMove = false;
}
);
}
);
}
);
</script>
</body>
</html> function setHistoryMove() {
var leftLocation = 0;
var topLocation = 0;
var boolMove = false;
event = event || window.event;
$("#headHistory").mousedown(function () {
boolMove = true;
leftLocation = event.x - $("#mainHistory").offset().left;
topLocation = event.y - $("#mainHistory").offset().top;
})
document.body.onmouseup = function () {
boolMove = false;
}
document.body.onmousemove = function () {
if (boolMove == true) {
$("#mainHistory").css({ "left": event.x - leftLocation, "top": event.y - topLocation });
}
}
// 由于鼠标在滑动的时候如果速度稍微快一点，就会使用 鼠标离开 div，div就不移动了。所以使用 document.body的触发鼠标事件
/*
.mouseleave(function () {
boolMove = false;
}).mouseup(function () {
boolMove = false;
})
.mousemove(function () {
if (boolMove == true) {
$("#mainHistory").css({ "left": event.x - leftLocation, "top": event.y - topLocation });
}
});
*/
} |