利用jQuery实现简易注册登录页面的动态切换
先上效果图:
利用jQuery实现简易注册登录页面的动态切换
先上效果图:
html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery.js"></script>
<link href="css/login11.css"rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="login-box">
<div id="box-top">
<span id="s-login">登录</span>
<span id="s-regist">注册</span>
</div>
<div id="login">
<div id="l-text">
<h2>LOGIN</h2>
<div id="l-text-box">
<form>
<span>userName</span>:<input type="text" name="name" class="text"/>
<span>passWord</span>:<input type="password" name="password" class="text"/>
</form>
<div class="btn">
<input type="submit" value="登录" class="l-butn"/>
</div>
<div class="help">
<a href="*" id="help-left">忘记密码</a>
<a href="*" class="help-help">帮助</a>
</div>
</div>
</div>
</div>
<div id="regist">
<div id="r-text">
<h2>Regist</h2>
<div id="r-text-box">
<form>
<span>userName</span>:<input type="text" name="name" class="text"/>
<span>passWord</span>:<input type="password" name="password" class="text"/>
<span>u_Address</span>:<input type="text" name="address" class="text"/>
</form>
<div class="btn">
<input type="submit" value="注册" class="l-butn"/>
</div>
<div class="help">
<a href="*" class="help-help">帮助</a>
</div>
</div>
</div>
</div>
</div>
<script src="js/login.js"></script>
</body>
</html>
css文件
#login-box{
background: #C6C6C6;
width: 300px;
height: 300px;
margin: auto;
box-shadow: #666 0px 0px 10px;
}
#box-top{
height: 10%;
background: #999999;
}
#s-login{
margin-left: 50px;
}
#s-regist{
margin-right: 50px;
float: right;
}
#login{
background: #3366FF;
height: 90%;
}
#regist{
background: #66CCFF;
height: 90%;
display: none;
}
h2{
margin: auto;
text-align:center
}
#l-text-box{
width: 90%;
margin: auto;
}
#r-text-box{
width: 90%;
margin: auto;
}
.text{
margin-top: 30px;
}
.btn{
margin: auto;
width: 50px;
margin-top: 20px;
}
.l-butn{
width: 50px;
height: 30px;
border-radius: 5px;
}
.help-help{
float: right;
}
#help-left{
float: left;
}
js文件
$("#s-regist").click(function(){
$("#login").slideUp(1000);
$("#regist").slideDown(5000);
});
$("#s-login").click(function(){
$("#regist").slideUp(1000);
$("#login").slideDown(5000);
});
html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery.js"></script>
<link href="css/login11.css"rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="login-box">
<div id="box-top">
<span id="s-login">登录</span>
<span id="s-regist">注册</span>
</div>
<div id="login">
<div id="l-text">
<h2>LOGIN</h2>
<div id="l-text-box">
<form>
<span>userName</span>:<input type="text" name="name" class="text"/>
<span>passWord</span>:<input type="password" name="password" class="text"/>
</form>
<div class="btn">
<input type="submit" value="登录" class="l-butn"/>
</div>
<div class="help">
<a href="*" id="help-left">忘记密码</a>
<a href="*" class="help-help">帮助</a>
</div>
</div>
</div>
</div>
<div id="regist">
<div id="r-text">
<h2>Regist</h2>
<div id="r-text-box">
<form>
<span>userName</span>:<input type="text" name="name" class="text"/>
<span>passWord</span>:<input type="password" name="password" class="text"/>
<span>u_Address</span>:<input type="text" name="address" class="text"/>
</form>
<div class="btn">
<input type="submit" value="注册" class="l-butn"/>
</div>
<div class="help">
<a href="*" class="help-help">帮助</a>
</div>
</div>
</div>
</div>
</div>
<script src="js/login.js"></script>
</body>
</html>
css文件
#login-box{
background: #C6C6C6;
width: 300px;
height: 300px;
margin: auto;
box-shadow: #666 0px 0px 10px;
}
#box-top{
height: 10%;
background: #999999;
}
#s-login{
margin-left: 50px;
}
#s-regist{
margin-right: 50px;
float: right;
}
#login{
background: #3366FF;
height: 90%;
}
#regist{
background: #66CCFF;
height: 90%;
display: none;
}
h2{
margin: auto;
text-align:center
}
#l-text-box{
width: 90%;
margin: auto;
}
#r-text-box{
width: 90%;
margin: auto;
}
.text{
margin-top: 30px;
}
.btn{
margin: auto;
width: 50px;
margin-top: 20px;
}
.l-butn{
width: 50px;
height: 30px;
border-radius: 5px;
}
.help-help{
float: right;
}
#help-left{
float: left;
}
js文件
$("#s-regist").click(function(){
$("#login").slideUp(1000);
$("#regist").slideDown(5000);
});
$("#s-login").click(function(){
$("#regist").slideUp(1000);
$("#login").slideDown(5000);
});
