js_移动窗口

最新推荐文章于 2022-11-03 11:07:02 发布

「已注销」

最新推荐文章于 2022-11-03 11:07:02 发布

阅读量579

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/osummertime/article/details/51085894

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="js/jquery-1.12.2.min.js"></script>
<script type="text/javascript">
var logos=false;
var x,y;
$(document).ready(function(){
$(".b").mousedown(function(e){
x=e.pageX-$(".a").offset().left;
y=e.pageY-$(".a").offset().top;
$("span").text("X: " + x + ", Y: " + e.pageY);
logos=true;
});
$(document).mousemove(function(e){
if(logos){
$("span").text("X: " + e.pageX + ", Y: " + e.pageY);
$(".a").css({"left":e.pageX-x,"top":e.pageY-y,});
}
});
$(".b").mouseup(function(e){
logos=false;
});
$(".d").click(function(){
$(".a").remove();
});
});
</script>
<title>移动窗口</title>
<style>
.a{
font-family:微软雅黑;
position:absolute;
left:160px;
top:150px;
width:400px;
height:320px;
border:1px solid #0099CC;
background:#fff;
}
.b{

position:absolute;
width:100%;
height:30px;
border-bottom:1px solid #0099CC;
background:#DDEDFB;
}
.c{
position:absolute;
top:31px;
width:100%;
height:289px;
background:#fff;
}
.d{
position: absolute;
top:5px;
right:5px;
width: 20px;
height:20px;
background-image: url("img/close.png");
background-size:cover;
}
</style>
</head>
<body style="background:#fff;">
<div class="a">
<div class="b">窗口标题<a href="#" class="d"></a></div>
<div class="c">窗口</div>
</div>
<p>鼠标指针位于： <span></span></p>
</body>
</html>