jquery实现可移动层

最新推荐文章于 2020-07-12 10:33:26 发布

lanxinsheng

最新推荐文章于 2020-07-12 10:33:26 发布

阅读量133

点赞数

分类专栏： jquery 文章标签： jquery html ViewUI

本文链接：https://blog.csdn.net/lanxinsheng/article/details/84047316

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function(){
$("#gb").mousedown(function(e){
var offset = $("#moveDiv").offset();
var p = {top:offset.top - e.clientY,left:offset.left - e.clientX};
if (!e) e = window.event;
$(document).mousemove(function(e){
$("#gb").css("cursor","text");
$("#moveDiv").css({"top":e.clientY + p.top,"left":e.clientX + p.left});
});
$(document).mouseup(function(){
$("#gb").css("cursor","move");
$(this).unbind("mousemove");
});
});
});
</script>
</head>
<body>
<div id="moveDiv" style="width:100px;height:100px;position:absolute;border:1px solid #CCCCCC;background:#FFFFFF">
<div id="gb" style="text-align:right;background:#CCCCCC;width:100%;cursor:move;"><a href="#">关闭</a></div>
</div>
</body>
</html>

lanxinsheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现可移动层

Insert title here $(function(){ $("#gb").mousedown(function(e){ var offset = $("#moveDiv").offset(); var p = {top:offset.top - e.clientY,left:offset.left - e.clientX}; if ...
复制链接

扫一扫