六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 144|回复: 0

jquery实现可移动层

[复制链接]

升级  50%

5

主题

5

主题

5

主题

童生

Rank: 1

积分
25
 楼主| 发表于 2013-2-7 20:35:47 | 显示全部楼层 |阅读模式
<!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>
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表