更多内容敬请关注此CSDN及Halo-FocusPoints博客
页面效果:情感树洞
默认账号:admin 密码:123456
demo下载:情感树洞demo.zip
目录构造
├──情感树洞demo
│ └── sign.html
│ └── index.html
│ └── user_control.html
│ └── css/
│ ├── bootstrap.min.css
│ ├── font-awesome.css
│ ├── index.css
│ └── style.css
│ └── js/
│ ├── bootstrap.min.js
│ ├── common.js
│ └── isScroll.js
│ ├── jquery.panelslider.min.js
│ └── jquery-1.9.1.min.js
└───── images/
├── bg1.jpg
├── bg2.jpg
├── home_bg_img.jpg
├── logo_large.png
├── logo_medium.png
└── DSC_0243.jpg
首先,我们来构思一下整个页面的构造
<html>
<head>
<meta charset="utf-8">
<title>登录-情感树洞</title>
<!--引入JQ1.9.1文件-->
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<!--添加一个div放置背景,由于我们采用可晃动的背景效果,所以采用div标签-->
<div id="login_bg"></div>
<!--页面主体-->
<div>
<!--第一个模块:放置两个按钮,触发登录和注册,为了方便设置css样式,这里采用div标签-->
<div>
<div>登录</div>
<div>注册</div>
</div>
<!--第二个模块:放置div存放登录、注册的版块-->
<div>
<!--放置form标签以便于在前后端整合时,方便发送前端账号密码给服务器端验证-->
<form>
<!--注意:这里只添加一个form来存放登录注册,然后通过js来判断当前显示的模块为登录还是注册-->
</form>
</div>
<!--第三个模块:放置异步请求时的响应窗口-->
<div></div>
</div>
</body>
</html>
以上代码为最初构思代码结构,可以看出主要的代码段分为三个模块:功能按钮、登录注册版块、异步请求响应窗口。
这时候,我们再看一下demo页面,然后构思我们缺少的东西以及效果的实现,或者说整个页面的执行流程。
大致为:
- 1、 显示登录注册按钮
- 2、点击按钮
- 3、显示登录注册版块
- 4、填写账号密码
- 5、提交表单验证(包含前、后端验证)
- 6、验证成功,显示异步请求响应窗口
- 7、跳转下一页面。
我们先来添加页面的背景图及其效果:
css目录下创建style.css文件
@charset "utf-8";
/* CSS Document */
/* 初始化设置 */
* {
padding: 0;
margin: 0;
}
body {
font-family: "微软雅黑";
font-size: 12px;
color: black;
height: 100%;
}
img {
display: block;
font-size: 0px;
border: none;
}
a {
color: black;
text-decoration: none;
}
/***************sign.html***************/
#login_bg{
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background-image: url(../images/bg1.jpg);
background-position: 50% 10%;
background-size: auto;
}
引入css文件:
<!--引入自定义样式-->
<link rel="stylesheet" type="text/css" href="css/style.css">
创建common.js文件
$(document).mousemove(function(e){ //背景移动
var page_width = $("body").width();
var x = e.pageX;
x=40+(((x-page_width/2)/page_width)*100+50)/20;
x = x+"% 10%";
var obj = document.getElementById("login_bg")
obj.style.backgroundPosition = x;
});
引入js文件(引入位置置于jq文件后,不然jq文件不会生效):
<script type="text/javascript" src="js/common.js"></script>
这时候,我们再看页面,就有了随鼠标晃动的效果。
接下来,我们研究三个板块的定位问题
先按照各个模块的定义来赋予其id及class并填入input等标签
代码如下:
<html>
<head>
<meta charset="utf-8">
<title>登录-情感树洞</title>
<!--引入自定义样式-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--引入JQ1.9.1文件-->
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<!--添加一个div放置背景,由于我们采用可晃动的背景效果,所以采用div标签-->
<div id="login_bg"></div>
<!--页面主体-->
<div id="login_content" class="contruct">
<!--第一个模块:放置两个按钮,触发登录和注册,为了方便设置css样式,这里采用div标签-->
<div id="login_content_logo">
<img src="images/logo_large.png">
<div id="login_content_log">登录</div>
<div id="login_content_reg">注册</div>
</div>
<!--第二个模块:放置div存放登录、注册的版块-->
<div id="login_content_log_02">
<p id="login_defeat">账号或密码错误</p>
<!--放置form标签以便于在前后端整合时,方便发送前端账号密码给服务器端验证-->
<form name="form">
<!--注意:这里只添加一个form来存放登录注册,然后通过js来判断当前显示的模块为登录还是注册-->
<div id="login_input1"><input id="login_input11" type="text" name="user" value="用户名" autocomplete="off"></div>
<div id="login_input2"><input id="login_input12" type="text" name="password" value="密码" autocomplete="off"></div>
<div id="login_input5"><input id="login_input33" type="text" name="user" value="用户名" autocomplete="off"></div>
<div id="login_input6"><input id="login_input44" type="text" name="password" value="密码" autocomplete="off"></div>
<p id="login_tip"></p>
<div id="login_input4">登录</div>
<div id="login_input3"><input type="checkbox" value="3" name="remeber" checked="checked">记住密码</div>
<p id="login_link1">
<a href="#">忘记密码</a>
</p>
<p id="login_link2">
<a href="#">注册账号</a>
</p>
</form>
<p id="login_close">×</p>
</div>
<!--第三个模块:放置异步请求时的响应窗口-->
<div id="login_content_log_03">
<!--返回用户头像-->
<div id="login_success_img">
<img src="images/DSC_0243.jpg" width="80" height="80">
</div>
<p id="login_success1">欢迎回来,<span id="welcome_user">admin</span></p>
<p id="login_success2">浏览器将在3秒后跳转至首页</p>
<p id="login_success3">
<!--服务器端返回首页地址-->
<a href="home.html">如果浏览器长时间没有跳转,点击这里返回首页</a>
</p>
</div>
</div>
</body>
<script type="text/javascript" src="js/common.js"></script>
</html>
效果如下:
我们通过下面的css样式达到我们想要的布局效果。
@charset "utf-8";
/* CSS Document */
/* 初始化设置 */
* {
padding: 0;
margin: 0;
}
body {
font-family: "微软雅黑";
font-size: 12px;
color: black;
height: 100%;
}
img {
display: block;
font-size: 0px;
border: none;
}
a {
color: black;
text-decoration: none;
}
/***************sign.html***************/
#login_bg{
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background-image: url(../images/bg1.jpg);
background-position: 50% 10%;
background-size: auto;
}
#login_content{
width: 100%;
}
/*模块一*/
#login_content_logo {
padding-top: 150px;
position: relative;
width: 960px;
height: auto;
margin: 0 auto;
}
#login_content_logo img {
width: 30%;
height: auto;
margin: 0 auto;
}
#login_content_log,#login_content_reg,#login_input4 {
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-ms-transition: background-color 0.5s;
width: 250px;
height: 35px;
border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
margin: 0 auto;
margin-top: 50px;
background-color: #0099cc;
color: white;
font-size: 15px;
text-align: center;
line-height: 35px;
cursor: pointer;
}
#login_content_reg{
margin-top: 35px;
background-color: white;
color: black;
}
#login_content_log:hover {
background-color: #006FB8;
}
#login_content_reg:hover {
background: #E3E3E3;
}
/*模块二*/
#login_content_log_02 {
/* display: none;*/
width: 300px;
height: 230px;
position: absolute;
background-image: url(../images/bg2.png);
background-repeat: repeat;
top: 300px;
left: 50%;
margin-left: -150px;
}
#login_input1 input,
#login_input2 input,
#login_input5 input,
#login_input6 input {
padding: 3px 10px;
width: 229px;
height: 27px;
border: none;
background-color: transparent;
outline-style: none;
font-size: 10px;
font-family: "微软雅黑";
color: #9F9F9F;
}
#login_input1,#login_input5 {
width: 250px;
height: 35px;
margin: 0 auto;
margin-top: 30px;
border: gray 1px solid;
background-color: white;
}
#login_input2,#login_input6 {
width: 250px;
height: 35px;
margin: 0 auto;
margin-top: 15px;
border: gray 1px solid;
background-color: white;
}
#login_input4 {
position: relative;
width: 250px;
height: 35px;
font-size: 15px;
text-align: center;
line-height: 35px;
background-color: #0099cc;
border: none;
margin: 0 auto;
margin-top: 25px;
color: white;
cursor: pointer;
border: #0099cc 1px solid;
}
#login_input3 {
float: left;
margin: 20px 10px 0px 20px;
}
#login_link1,
#login_link2 {
float: left;
width: 60px;
margin: 20px 19px 0px 25px;
}
#login_link1 a:hover,
#login_link2 a:hover {
text-decoration: underline;
}
#login_close {
position: absolute;
top: -5px;
right: 1px;
cursor: pointer;
font-size: 20px;
}
#login_defeat {
width: 120px;
height: 25px;
text-align: center;
line-height: 25px;
background-color: #9B0002;
color: white;
position: absolute;
z-index: 3;
left: 50%;
margin-left: -60px;
top: -25px;
}
/*模块三*/
#login_content_log_03 {
/*display: none;*/
position: absolute;
width: 300px;
height: 230px;
background-image: url(../images/bg2.png);
background-repeat: repeat;
top: 300px;
left: 50%;
margin-left: -150px;
}
#login_success_img {
width: 80px;
height: 80px;
border-radius: 40px;
overflow: hidden;
margin: 0 auto;
margin-top: 20px;
}
#login_success1 {
text-align: center;
font-size: 15px;
color: black;
margin-top: 20px;
}
#login_success1 span {
font-size: 16px;
color: #0099cc;
}
#login_success2 {
text-align: center;
margin-top: 20px;
font-size: 12px;
}
#login_success3 {
text-align: center;
margin-top: 5px;
font-size: 12px;
}
#login_tip {
position: absolute;
left: 0;
top: 125px;
text-align: center;
width: 100%;
font-size: 9px;
color: #8C0002;
margin: 0 auto;
}
这时候,应该会质疑这页面是有bug吧?并不是,而是我们在使用当前模块时,没有隐藏其他模块造成的。
我们在回到我们的执行流程,我们按流程来展示、隐藏模块并添加相应的js。
我们在访问页面时,最先进入的是初始化状态,即为下面的第一点。
-[ ] 1、 显示登录注册按钮
- 2、点击按钮
- 3、显示登录注册版块
- 4、填写账号密码
- 5、提交表单验证(包含前、后端验证)
- 6、验证成功,显示异步请求响应窗口
- 7、跳转下一页面。
1.显示登录注册按钮 、隐藏其他
我们只需要在模块二、三的css中添加
display:none;
这里,模块二中的提示账号密码错误的p标签也应隐藏
此时,页面已经完成的初始化状态。
接下来,就全靠js来实现模块间的切换了。
在common.js中添加如下代码:
/*sign.html*/
//点击登录按钮,隐藏模块一,显示模块二的登录界面。
$("#login_content_log").on('click', function() {
$("#login_content_logo").fadeOut();
$("#login_input5,#login_input6").fadeOut(0);
$("#login_input1,#login_input2,#login_content_log_02,#login_input3").fadeIn();
$("#login_input4").html("登录");
// $('form').setAttribute('action','/login') //给form赋予action属性
});
//点击注册按钮,隐藏模块一,显示模块二的注册界面。
$("#login_content_reg").on('click', function() {
$("#login_content_logo").fadeOut();
$("#login_input5,#login_input6").fadeIn();
$("#login_input1,#login_input2,#login_content_log_02,#login_input3").fadeOut(0);
$("#login_input4").html("注册");
// $('form').setAttribute('action','/login')//给form赋予action属性
});
//点击关闭按钮,隐藏模块二,显示模块一
$("#login_close").on('click', function() {
$("#login_content_logo").fadeIn();
$("#login_content_log_02").fadeOut();
});
至此模块一、二的显示、隐藏问题已经解决。
由于模块三是在表单验证成功后显示,所以我们先来搞定模块二表单提交、前端表单验证。
//表单验证
$("#login_input4").on('click', function() { //登陆按钮
var user = $("#login_input11").val();
var password = $("#login_input12").val();
if(user == '' || user == '用户名') {
$('#login_tip').html("用户名不能为空");
$("#login_input11").focus();
return false;
} else if(password == '' || password == '密码') {
$('#login_tip').html("密码不能为空");
$("#login_input12").focus();
return false;
} else {
$('#login_tip').html("登录中...");
t = setTimeout("demo()", 1500);
}
});
这里没有添加详细的表单验证需求,如密码限制为16位等。
如需了解前端表单验证,请关注此CSDN博客及Halo-FocusPoints博客后续更新。
然后是模块三部分
因为到目前为止,我们使用的页面仅仅是前端静态页面。所以我们要模拟一个登陆成功的效果。
在common.js中添加如下代码:
function demo() { //效果测试
var user = $("#login_input11").val();
var password = $("#login_input12").val();
if(user == "admin" && password == "123456") {
$("#login_content_log_02").fadeOut();
$("#login_content_log_03").fadeIn();
t1 = setTimeout("window.location.href='index.html'", 3000);
} else {
$('#login_tip').html("账号或密码错误!");
$('#login_tip').fadeIn();
$('#login_tip').fadeOut(1000);
}
}
至此,sign.html的效果已经全部完成。
后续内容:index.html 前后端代码实现、user.html 前后端代码实现及前后端整合,
请关注Halo-FocusPoints博客。