登入
<doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
body{
background-image:url("images/bg.png");
}
*{
margin:0;
padding:0;
}
#btn{
width:66px;/*宽*/
height:26px;/*高*/
background-color:#393939;
border-radius:15px;/*圆角*/
color:#fff;
font-size:12px;
text-align:center;/*文本居中对齐*/
line-height:26px;/*行高 把文字放到行高为多少的中间*/
font-family:"微软雅黑";
position:fixed;/*固定定位，距离浏览器*/
top:10px;
right:30px;
cursor:pointer;
}
#beijing{
width:100%;
height:100%;
background-color:rgb(0,0,0,0.3);/*为了看到被覆盖的*/
position:fixed;
left:0;
top:0;
display:none;
}
#dlk{
width:600px;
height:350px;
background:#fff;
left:50%;
top:50%;
display:none;
}
#dlk h3{
height:30px;
background-color:#fff9933;
color：#fff;
line-height:40px;
text-indent:2px;/*首行缩进*/
}
#dlk h3 .cl{
display:block;/*转变为块元素*/
width:17px;
height:20px;
background:url("imges/colse.png");
float:right;/*右浮动*/;
margin-top:10px;
margin-right:15px;
}
#dlk .text{
padding:20px;
font-size:12px;
line-height:17px;
}
#dlk p{
width:310px;
height:35px;
margin:0 auto 20px;/*距离*/
line-height:35px;
}
#dlk p input{
width:250px;
height:35px;
float:right;
border:1px solid #ddd;
}
#dlk p input .sub{
background-image:url("images/but_bgk.jpg");
}
</style>
</head>
<body>
<div id="btn">登入</div>
<div id="beijing"></div>
<div id="dlk">
<h3>登入框<span class="c1"></span></h3>
<div class="text"><img src="images/logo.png width:35px;height:35px;align:absmiddle;/>号外号外</div>/*同行*/
<form>
<p>帐号:<input type="text"></p>
<p>密码：<input type="password" /></p>
<p><input class="sub" type="submit"/ value=""/></p>
基础班 静态布局到项目实战
中级班 jq js ajax
高级版h5+css3+bootstrap
进阶班 移动工程师（开微信 app)
</div>
<script src="js/jquery.js></script>
<script>
//点击登入
$("#dlk").onclick(function(){
$("#beijing").show();
$("#dlk").show();
})
//拖动登入框
//鼠标按下
$("h3").mousedown(function(ev){
//ev鼠标事件对象
var ev=ev||window.event;//解决浏览器兼容问题
//ev.clientX鼠标到浏览器左边的位置
//$("#dlk").offset()登入框的坐标（水平.垂直）
var l=ev.clientX-$("#dlk").offset().left;
var t=ev.clientY-$("#dlk").offset().top;
//鼠标移动
$(document).mousemove(function(ev){
ev=ev||window.even;
var Left=ev.clientX-l;
var Top=ev.clientY-t;
if(Left<0){
Left=0
}else if(Left>$(window).width()-$(“#dlk").width()){
Left=$(window).width()-$("#dlk").width();
}else if
if(Top>$(window).height()-$("$dlk").height()){
Top=$(window).height-$("#dlk").height()
};
}
//改变登入框的位置
$("#dlk").css(
left:Left-l+$("#dlk")..width()/2;
top:Top-l+$("#dlk").height()/2;)
});
//鼠标抬起
$(document).mouseup(function(){
$(document).unbind("mousemove");
$(document).unbind("mousedown");
});
});
</script>
</body>
</html>
