jq实现登陆页面的拖拽功能
Posted 不再犯错
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq实现登陆页面的拖拽功能相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
.dialog{
width: 380px;
height: auto;
position:fixed;
z-index: 1000;
border: 1px solid #d5d5d5;
background-color:#fff;
display: none;
}
.diatitle{
height: 48px;
line-height: 40px;
text-align: center;
color:#535353;
background-color: #f5f5f5;
}
.diacontent{
padding: 15px 20px;
}
.close{
font-size: 20px;
float: right;
margin-right: 20px;
}
#txt{
width: 100%;
height: 40px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
#pwd{
width: 100%;
height: 40px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
#btn{
display: block;
width:80px;
height: 40px;
margin:0 auto;
background-color: #CCCCCC;
border:none;
outline-style: none;
}
.mask{
background-color:#000000;
opacity: 0.4;
filter:Alpha(opacity=40);
z-index: 900;
position: fixed;
top: 0px;
left: 0px;
display: none;
}
</style>
</head>
<body style="height:1500px">
<div class="dialog" id="dialog">
<div class="diatitle" id="diatitle">
登陆页
<a href="#" class="close">×</a>
</div>
<div class="diacontent" id="diacontent">
<form action="sadfsdaf" method="post">
<input type="text" name="" id="txt" placeholder="请输入账号" />
<input type="password" name="" id="pwd" placeholder="请输入密码" />
<div id="" style="text-align:right;font-size: 12px;">
<a href="#">忘记密码</a>
</div>
<input type="submit" name="" id="btn" value="登陆" />
<div id="" style="text-align:right;font-size: 12px;">
<a href="#">立即注册</a>
</div>
</form>
</div>
</div>
<div class="mask">
</div>
<div id="login">
点击弹出登陆图层
</div>
</body>
<script type="text/javascript">
$(function(){
$(".close").on("click",close);
function close(){
$("#dialog").hide();
$(".mask").hide();
}
$("#login").on("click",login);
function login(){
$("#dialog").css({
"left":($(window).width()-$("#dialog").innerWidth())/2+"px",
"top":($(window).height()-$("#dialog").innerHeight())/2+"px"
})
$("#dialog").show();
$(".mask").css({
"width":$(window).width(),
"height":$(window).height()
});
$(".mask").show();
}
$("#diatitle").on(\'mousedown\',down);
function down(event){
deltax=event.clientX-$("#dialog").offset().left;
deltay=event.clientY-$("#dialog").offset().top;
$("#diatitle").css({
"cursor":"move"
})
$(document).on(\'mousemove\',move);
$(document).on(\'mouseup\',up);
};
function move(event){
$("#dialog").css({
"left":(event.clientX-deltax)+"px",
"top":(event.clientY-deltay)+"px"
})
if($("#dialog").offset().left<0){
$("#dialog").css({"left":"0px" })
}
if($("#dialog").offset().top<0){
$("#dialog").css({"top":"0px" })
}
if($("#dialog").offset().top>$(window).height()-$("#dialog").innerHeight()){
$("#dialog").css({"top":$(window).height()-$("#dialog").innerHeight() })
}
if($("#dialog").offset().left>$(window).width()-$("#dialog").innerWidth()){
$("#dialog").css({"left":$(window).width()-$("#dialog").innerWidth()})
}
return false;
};
function up(event){
$(document).off(\'mousedown\',down);
$(document).off(\'mousemove\',move);
};
});
</script>
</html>
以上是关于jq实现登陆页面的拖拽功能的主要内容，如果未能解决你的问题，请参考以下文章