<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>Fullscreen Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- CSS -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/supersized.css">
<link rel="stylesheet" href="css/style.css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body oncontextmenu="return false">
<div class="page-container">
<h1>Login</h1>
<form action="" method="post">
<div>
<input type="text" name="username" class="username" placeholder="Username" autocomplete="off"/>
</div>
<div>
<input type="password" name="password" class="password" placeholder="Password" oncontextmenu="return false" onpaste="return false" />
</div>
<button id="submit" type="button">Sign in</button>
</form>
<div class="connect">
<p>If we can only encounter each other rather than stay with each other,then I wish we had never encountered.</p>
<p style="margin-top:20px;">如果只是遇见，不能停留，不如不遇见。</p>
</div>
</div>
<div class="alert" style="display:none">
<h2>消息</h2>
<div class="alert_con">
<p id="ts"></p>
<p style="line-height:70px"><a class="btn">确定</a></p>
</div>
</div>
<!-- Javascript -->
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="js/supersized.3.2.7.min.js"></script>
<script src="js/supersized-init.js"></script>
<script>
$(".btn").click(function(){
is_hide();
})
var u = $("input[name=username]");
var p = $("input[name=password]");
$("#submit").live('click',function(){
if(u.val() == '' || p.val() =='')
{
$("#ts").html("用户名或密码不能为空~");
is_show();
return false;
}
else{
var reg = /^[0-9A-Za-z]+$/;
if(!reg.exec(u.val()))
{
$("#ts").html("用户名错误");
is_show();
return false;
}
}
});
window.onload = function()
{
$(".connect p").eq(0).animate({"left":"0%"}, 600);
$(".connect p").eq(1).animate({"left":"0%"}, 400);
}
function is_hide(){ $(".alert").animate({"top":"-40%"}, 300) }
function is_show(){ $(".alert").show().animate({"top":"45%"}, 300) }
</script>
</body>
</html>
漂亮的登录页+滑动弹出框+js正则验证
需积分: 16 72 浏览量
2016-07-07
15:53:48
上传
评论 1
收藏 194KB RAR 举报
pd-d6059442-f495-11e4-ab81-00163e001348.rar （10个子文件） 
login 
index.html 2KB img 
2.jpg 67KB 1.jpg 70KB 3.jpg 52KB js 
supersized.3.2.7.min.js 18KB supersized-init.js 2KB login.html 3KB css supersized.css 2KB reset.css 1KB style.css 5KB资源评论
