<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css" media="screen">
.box{height: 320px;width: 320px;border: 1px solid #ccc;position: absolute;top: 50%; left: 30%; }
.title{height: 40px;width: 320px;background: #ccc;line-height: 40px;text-align: center;z-index: 88;cursor:move}
.btn{width: 20px;height: 20px;border-radius: 20px;color: #fff;font-weight: bold;line-height: 20px;text-align: center;position: absolute;right: 4px;top: 4px;background: #666;font-size: 12px;cursor: pointer;}
</style>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<body>
<div class="box">
<div class="title">
</div>
<div class="btn">X</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
var off=0;
var X,left,Y,top;
$(".btn").click(function(){
$(".box").hide();
})
var w = $('.box').outerWidth();
$(".title").mousedown(function(e){
off=1;
X=e.clientX-$(".box").offset().left;
Y=e.clientY-$(".box").offset().top;
});
$(document).mousemove(function(e){
if (!off) {return;}
left=e.clientX-X;
top=e.clientY-Y;
if (left<=0) {
left=0;
}
if (top<=0) {
top=0;
}
if (left>=window.innerWidth-w) {
left=window.innerWidth-w;
}
if (top>=window.innerHeight-w) {
top=window.innerHeight-w;
}
$(".box").css("left",left);
$(".box").css("top",top);
})
$(document).mouseup(function(){
off=0;
})
})
</script>
</html>
扫一扫
5211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
