jquery可移动的弹窗
<!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.7.2.min.js" type="text/javascript">
</script>
<style type="text/css">
.footer { position: fixed; bottom: 0; width: 100%; }
.moveBar { position:absolute; width: 250px; height: 300px; background: #666; border: solid1px #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 xxx 版权所有
</p>
</div>
<script>
$(function(){
$("#banner").live("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>
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17