前端實現情感樹洞頁面效果demo1-登陸註冊頁面（sign.html）
阿新 • • 發佈：2018-12-06
更多內容敬請關注此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標籤--> 以上程式碼為最初構思程式碼結構，可以看出主要的程式碼段分為三個模組：功能按鈕、登入註冊版塊、非同步請求響應視窗。
這時候，我們再看一下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