|
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，如需转载请自行联系原作者