【源码下载】(百度网盘)
【源码下载】(爱问知识人)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试登录</title>
<link href="css/login.css" rel="stylesheet" />
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/login.js" type="text/javascript"></script>
</head>
<body>
<div id="opacityDiv"> </div>
<div id="divParent">
<div id="div0"><a href="#">登录</a></div>
<div>你好!</div>
</div>
<div id="div1">
<div id="close"><span>×</span></div>
<div><label>用户名</label><input id="user" align="left" width="20px"/></div>
<div><label>密码:</label><input type="password" width="20px" /></div>
<div><input type="submit" id="loginbt" value="登录" /><input type="reset" id="cancle" value="取消" /></div>
</div>
<!-- 由静寞小森http://blog.sina.com.cn/u/1586802947 奉献给大家,希望大家交流 -->
</body>
</html>
// JavaScript Document
$(document).ready(function() {
$("body").css({height:$(window).height()-50,width:$(window).width()-50});
var left_margin = ($("body").width() - $("#div1").width()) / 2;
var top_margin = ($("body").height() - $("#div1").height()) / 2;
var left_padding;
var top_padding;
var draggingBool = false;
//alert("height"+width+";;width:"+height);
$("#div0").click(function(){
//$("#div0").hide();
$("#div1").show(500);
//$("#div1").css({"margin-top":height,"margin-left":width});
$("#div1").offset({top:top_margin,left:left_margin});
$("#opacityDiv").offset({top:0,left:0});
$("#opacityDiv").css({height:$(window).height(),width:$(window).width()});
$("#opacityDiv").css({opacity:0.4});
$("#opacityDiv").show(500);
});
$("#close span").click(function(){
$("#div1").hide(500);
$("#opacityDiv").hide(500);
});
//拖动登录窗口的效果
$("#close").mousedown(function(e){
draggingBool = true;
left_padding = e.clientX - $("#div1").offset().left;
top_padding = e.clientY - $("#div1").offset().top;
//alert("left:"+left_margin+"\\"+"top:"+top_margin);
$("#div1").css({opacity:0.2});
});
$(document).mouseup(function(){
draggingBool = false;
$("#div1").css({opacity:1.0});
});
$(document).mousemove(function(e){
if(!draggingBool)
return;
var x = e.clientX - left_padding;
var y = e.clientY - top_padding;
// alert(x+"^^^^^"+y);
$("#div1").css({top:y,left:x});
});
});
@charset "utf-8";
/* CSS Document */
body{
text-align:center;
}
#divParent{
width:980px;
}
#div1{
position:absolute;
display:none;
height:100px;
width:250px;
background-color:#9F9;
border:outset #06C 1px;
z-index:1001;
border-top-left-radius:3px;
border-top-right-radius:3px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
#opacityDiv{
display:none;
z-index:100;
position:absolute;
/* Firefox 3.6 */
background-image: -moz-linear-gradient(top, #00F, #F00);
/* Safari & Chrome */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #00F),color-stop(1, #F00));
/* IE6 & IE7 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00F', endColorstr='#F00');
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00F', endColorstr='#F00')";
}
#cancle{
margin-left:50px;
}
#close{
text-align:right;
height:15px;
padding-right:1px;
cursor:move;
}
#close span{
cursor:default;
}