|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<
html
>
<
head
>
<
meta
http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
meta
name="author" content="m.178hui.com" />
<
meta
name="applicable-device" content="mobile" />
<
meta
name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<
title
>返利网登录 — 一起惠返利网·触摸版</
title
>
<
link
href="frozenui/css/frozen.css" rel="stylesheet" type="text/css">
<
script
src="js/jquery-1.8.3.min.js"></
script
>
<
script
src="layer/layer.js"></
script
>
<
link
href="css/public.css" rel="stylesheet" type="text/css" />
<
link
href="css/login.css" rel="stylesheet" type="text/css">
<
script
>
$(window).load(function() {
//$("#status").fadeOut();//fadeOut隐藏，fadeIn显示
//$("#preloader").delay(350).fadeOut("slow");
})
</
script
>
</
head
>
<
script
type="text/javascript">
$(document).ready(function(){
$("form").submit(function(e){
var username = $.trim($("#username").val());
var password = $.trim($("#password").val());
if(username == ''){
layer.tips('请输入用户名/邮箱/手机号码','#username', {tips: 1});
return false;
}else if(password == ''){
layer.tips('请输入登录密码','#password', {tips: 1});
return false;
}
});
});
</
script
>
<
body
>
<
div
class="mobile">
<!-- .mobile {
background-color: yellow;
min-width: 320px;
} ·-->
<!--页面加载 开始-->
<
div
id="preloader">
<!--
#preloader { #status { #status p { .center-text {
position: fixed; position: fixed; top: 70%; text-align: center;
z-index: 2500; z-index: 999999; } background-image: url(../images/loading.jpg);
top: 0; width: 250px; background-repeat: no-repeat;
left: 0; height: 250px; background-position: center top;
right: 0; position: absolute; height: 182px;
bottom: 0; left: 50%; width: 234px;
background-color: #fff; top: 50%; }
z-index: 999999; background-size: 32px 32px;
} margin-top: -125px; .center-text span {
margin-right: 0; font-size: 14px;
margin-bottom: 0; color: #999999;
margin-left: -115px; position: relative;
} top: 170px;
}
-->
<
div
id="status">
<
p
class="center-text"><
span
>拼命加载中···</
span
></
p
>
</
div
>
</
div
>
<!--页面加载 结束-->
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!--页面加载 结束-->
<!--header 开始-->
<
header
>
<!-- a,div,header,span {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /*修改a、input和button点击时的蓝色外边框和灰色半透明背景*/
}
.header { .header h2 {
height: 44px; color: #fff;
background: #ff8200; font-size: 16px;
position: relative; font-weight: normal;
z-index: 10; height: 44px;
} line-height: 44px;
text-align: center;
font-weight: bold;
} -->
<
div
class="header">
<
a
class="new-a-back" href="javascript:history.back();"> <
span
><
img
src="images/iconfont-fanhui.png"></
span
></
a
>
<!--
.new-a-back { .new-a-back span {
height: 40px; background: url(../images/icon_fh.png) no-repeat 0px 0px/18px 18px;
position: absolute; display: block;
width: 45px; height: 35px;
} text-indent: 17px; 缩进
width: 50px;
color: #FFF;
font-size: 14px;
padding-top: 8px;
margin-left: -10px;
}
.new-a-back span img { .header h2 {
width: 25px; 图片缩放 color: #fff;font-size: 16px;font-weight: normal;height: 44px;line-height: 44px;
} text-align: center;font-weight: bold;
}
-->
<
h2
>一起惠返利网·登录</
h2
>
</
div
>
</
header
>
<!--header 结束-->
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
<!--header 结束-->
<!-- .main { .main #frm_login { .main .item {
padding-top: 15px; padding-right: 15px; margin-bottom: 15px;
padding-bottom: 15px; padding-left: 15px; position: relative;
} } width: 100%;
margin-top: 15px;
}
.main .item .txt-username,.main .item .txt-password{ .main .item .txt-input {
font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; background: none repeat scroll 0 0 #fff;
margin-bottom: 10px; border: 1px solid #D1D1D1;
padding-left: 10px; border-radius: 5px;
} color: #252525;
font-size: 14px;
height: 44px;
width: 100%;
}
.main .item .input-close { .main .item-username .input-close {
cursor: pointer; right: 7px;
display: block; }
height: 25px;
position: absolute; .main .item-password .btn-off {
top: 10px; background: url("../images/u_s1.png") no-repeat scroll 0 0/51px 35px;
width: 25px; }
background-attachment: scroll;
background-image: url(../images/u_close.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 25px;
}
-->
<
div
class="w main">
<
form
id="frm_login" method="get" action="">
<
div
class="item item-username">
<
input
id="username" class="txt-input txt-username" type="text" placeholder="请输入用户名/邮箱/手机号" value="" name="username">
<
b
class="input-close" style="display: none;"></
b
>
<!-- <b> </b>斜体 -->
</
div
>
<
div
class="item item-password">
<
input
id="password" class="txt-input txt-password ciphertext" type="password" placeholder="请输入密码" name="password" style="display: inline;">
<
input
id="ptext" class="txt-input txt-password plaintext" type="text" placeholder="请输入密码" style="display: none;" name="ptext">
<
b
class="tp-btn btn-off"></
b
>
</
div
>
<
div
class="item item-login-option">
<!--
.main .item-login-option { .main .item-login-option .aoutlogin {
font-size: 14px; float: left; 就不会占用一行
margin-bottom: 5px; margin-left: 10px;
height: 30px; font-size: 12px;
} color: #666666;
}
.main .item-login-option .retrieve-password { .main .item-login-option .retrieve-password a {
float: right; color: #4eabe8;
text-align: right; font-size: 12px;
width: 50%; text-decoration: none;
margin-right: 10px; }
}
-->
<
div
class="aoutlogin">
<
label
class="ui-checkbox ui-checkbox-s">
<
input
type="checkbox" name="checkbox" checked/>一个月内免登录
</
label
>
</
div
>
<
span
class="retrieve-password"> <
a
class="" href="getpwd_email.html"> 找回密码</
a
> </
span
>
</
div
>
<
div
class="ui-btn-wrap"><
input
name="" type="submit" value="用户登录" class="ui-btn-lg ui-btn-primary" /> </
div
>
<!--
.ui-btn-lg { .ui-btn-primary { .ui-btn-danger {
cursor: pointer; background-clip: padding-box; background-clip: padding-box;
border-radius: 5px; background-color: #4eabe8; background-color: #de3b8a;
display: block; border-color: #4eabe8; border-color: #de3b8a;
font-size: 14px; color: #fff; color: #fff;
height: 40px; text-decoration: none; }
line-height: 40px; }
width: 100%;
text-align: center;
text-decoration: none;
}
-->
<
div
class="ui-btn-wrap"> <
a
class="ui-btn-lg ui-btn-danger" href="register.html">没有账号？立即注册</
a
> </
div
>
<
div
class="item item-login-other">
<!--
.main .item-login-other dt { .main .item-login-other dd { .main .item-login-other dd .qq {
color: #666; margin: 0px; width: 20%;
font-size: 12px; } }
margin-bottom: 13px;
}
.main .item-login-other dd a span {
display: block;
height: 40px;
overflow: hidden;
width: 40px;
}
-->
<
dl
>
<
dt
>其它登录方式</
dt
>
<
dd
> <
a
class="qq" href="#"> <
span
><
img
alt="" src="images/login_qq.png" width="40" height="40"></
span
> </
a
> </
dd
>
</
dl
>
</
div
>
</
form
>
</
div
>
<
div
class="m_user w">
<
a
href="login.html">登录</
a
>
<
a
href="register.html">注册</
a
>
<
a
href="#">返回顶部</
a
>
</
div
>
<
div
class="footer w">
<
a
href="#"><
div
class="ico_img"><
img
src="images/178hui-app.png"></
div
><
span
style="color:#00bb9c">客户端</
span
></
a
>
<
a
href="index.html"><
div
class="ico_img"><
img
src="images/178hui-shouji.png"></
div
><
span
style="color:#eb4f38">触摸版</
span
></
a
>
<
a
href="#"><
div
class="ico_img"><
img
src="images/178hui-diannao.png"></
div
><
span
>电脑版</
span
></
a
>
</
div
>
<
div
class="copyright">Copyright © 2012-2015 一起惠返利网 m.178hui.com 版权所有</
div
>
</
div
>
</
body
>
</
html
>
<
script
type="text/javascript" >
$(function() {
$(".input-close").hide();
displayPwd();
displayClearBtn();
setTimeout(displayClearBtn, 200 ); //延迟显示,应对浏览器记住密码
});
//是否显示清除按钮
function displayClearBtn(){
if(document.getElementById("username").value != ''){
$("#username").siblings(".input-close").show();
}
if(document.getElementById("password").value != ''){
$(".ciphertext").siblings(".input-close").show();
}
if($("#codeLevel").val()!="" && $("#codeLevel").val()!='0'){
if($("#validateCode").val()!=""){
$("#validateCode").siblings(".input-close").show();
}
}
}
//清除input内容
$('.input-close').click(function(e){
$(e.target).parent().find(":input").val("");
$(e.target).hide();
$($(e.target).parent().find(":input")).each(function(i){
if(this.id=="ptext" || this.id=="password"){
$("#password").val('');
$("#ptext").val('');
}
});
});
//设置password字段的值
$('.txt-password').bind('input',function(){
$('#password').val($(this).val());
});
//显隐密码切换
function displayPwd(){
$(".tp-btn").toggle(//切换第一次执行第一个函数，切换第二次执行第二个函数
function(){
$(this).addClass("btn-on");
var textInput = $(this).siblings(".plaintext");//被选元素的兄弟节点
var pwdInput = $(this).siblings(".ciphertext");
pwdInput.hide();
textInput.val(pwdInput.val()).show().focusEnd();
},
function(){
$(this).removeClass("btn-on");
var textInput = $(this).siblings(".plaintext ");
var pwdInput = $(this).siblings(".ciphertext");
textInput.hide();
pwdInput.val(textInput.val()).show().focusEnd();
}
);
}
//监控用户输入
$(":input").bind('input propertychange', function() {//$(":input")所有的 <
input
> 元素，bind('input propertychange')监听输入框发生变化
if($(this).val()!=""){
$(this).siblings(".input-close").show();
}else{
$(this).siblings(".input-close").hide();
}
});
</
script
>
|
本文转自农夫山泉别墅博客园博客，原文链接：http://www.cnblogs.com/yaowen/p/5520258.html，如需转载请自行联系原作者
