【jQuery】网上看到一个不错的登陆界面
预览截图如下：
Html部分代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="login.css"/>
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript" src="login.js"></script>
</head>
<body>
<div id="home">
<form id="login" class="current1" method="post">
<h3>用户登入</h3>
<img class="avator" src="./images/avatar.png" width="96" height="96"/>
<label>邮箱/名称<input type="text" name="userName" style="width:215px;" /><span>邮箱为空</span></label>
<label>密码<input type="password" name="pass" /><span>密码为空</span></label>
<button type="button">登入</button>
</form>
</div>
</body>
</html>
css代码部分：
*{padding:;margin:;}
/* 清除浮动 */
.clearfix:after {content: "";display: table;clear: both;}
html, body { height: 100%; }
body {
font-family:"Microsoft YaHei"; background:#EBEBEB; background:url(./images/stardust.png);
font-weight:; font-size: 15px; color: #333;overflow: hidden;}
a {text-decoration: none; color:#000;}
a:hover{color:#F87982;}
/*home*/
#home{padding-top:100px;}
/*logint界面*/
#login{
padding:20px 30px 30px; width:300px; background:#FFF; margin:auto;
border-radius: 3px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
.current1{
-moz-transform: scale(0); /* for Firefox 缩放比例 */
-webkit-transform: scale(0); /* for Chrome || Safari 缩放比例 */
-o-transform: scale(0); /* for Opera 缩放比例 */
-ms-transform: scale(0); /* for IE 缩放比例 */
transform: scale(0);
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
/*
* CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。
* 这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值
*/
}
.current{
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#login h3{ font-size:18px; line-height:25px; font-weight:; letter-spacing:3px; margin-bottom:20px; color:#C8C8C8; text-align:center;}
#login label{ color:#C8C8C8; display:block; height:35px; padding:0 10px; font-size:12px; line-height:35px; background:#EBEBEB; margin-bottom:10px;position:relative;}
#login label input{ font:13px/20px "Microsoft YaHei"; background:none; height:20px; border:none; margin:7px 0 0 10px;width:245px;outline:none ; letter-spacing:normal; z-index:; position:relative; }
#login label span{ display:block; height:35px; color:#F30; width:100px; position:absolute; top:; left:190px; text-align:right;padding:0 10px 0 0; z-index:; display:none; }
#login button{
font-family:"Microsoft YaHei";
cursor:pointer;
width:300px;
height:35px;
background:#FE4E5B; border:none; font-size:14px; line-height:30px; letter-spacing:3px; color:#FFF; position:relative; margin-top:10px;
-moz-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;}
#login button:hover{ background:#F87982; color:#000;}
/*头像*/
.avator{
display:block;
margin:0 auto 20px;
border-radius:50%;
}
js代码部分：
$(function(){
/**
* jquery方法：addClass()
* addClass() 方法向被选元素添加一个或多个类。该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。
* 如需添加多个类，请使用空格分隔类名。
*/
$("#login").addClass("current");
/**
* 正则检验邮箱
* email 传入邮箱
* return true 表示验证通过
*/
function check_email(email) {
if (/^[\w\-\.]+@[\w\-]+(\.[a-zA-Z]{2,4}){1,2}$/.test(email)){
return true;
}
}
/**
* input 按键事件keyup
*/
$("input[name]").keyup(function(e){
//禁止输入空格 把空格替换掉(空格的ASCII为32)
if($(this).attr('name')=="pass" && e.keyCode==32){
$(this).val(function(i,v){
return $.trim(v);
});
}
if($.trim($(this).val())!=""){
$(this).nextAll('span').eq(0).css({display:'none'});
}
});
//错误信息
var succ_arr=[];
/**
* input失去焦点事件focusout
* 这跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
*/
$("input[name]").focusout(function(e){
var msg="";
if($.trim($(this).val())==""){
if($(this).attr('name')=='userName'){
succ_arr[0]=false;
msg="登入名为空";
}else if($(this).attr('name')=='pass'){
succ_arr[1]=false;
msg="密码为空";
}
}else{
if($(this).attr('name')=='userName'){
succ_arr[0]=true;
}else if($(this).attr('name')=='pass'){
succ_arr[1]=true;
}
}
$(this).nextAll('span').eq(0).css({display:'block'}).text(msg);
});
/**
* Ajax用户注册
*/
$("button[type='button']").click(function(){
$("input[name]").focusout(); //让所有的input标记失去一次焦点来设置msg信息
for (x in succ_arr){
if(succ_arr[x]==false) return;
}
//$("#login").removeClass("current");
var data=$('#login').serialize(); //序列化表单元素
/**
* 有兴趣的可以到这里 自行发送Ajax请求 实现注册功能
*/
});
});
参考资料：
http://www.cnblogs.com/Li-Cheng/p/3649687.html
【jQuery】网上看到一个不错的登陆界面的更多相关文章
- 一个简单WPF登陆界面，包含记住密码，自动登录等功能，简洁美观
简介:这是一个自己以前用WPF设计的登陆界面,属于一个实验性的界面窗体,如果用于产品还很有不足.但也是有一点学习价值.后台代码略有复杂,但基本上都有注释 分类,略有代码经验的一般都能看懂. 登陆界面外 ...
- 用Html写一个简单的登陆界面
<!DOCTYPE html> <html> <title>登陆页面</title> <head> <meta charset=&qu ...
- jade 网上看到一个不错的demo 分享 一下 链接
http://download.csdn.net/detail/sarah1992/9347903 启动的时候 先启动 http://localhost:8080/ 在 node chat 启动 ht ...
- QML设计登陆界面
QML设计登陆界面 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN7 开发环境:Qt5.2 说明: 用QML设计一个应用的登陆界面 ...
- ios swift模仿qq登陆界面，xml布局
给大家推荐两个学习的地址: 极客学院的视频:http://www.jikexueyuan.com/path/ios/ 一个博客:http://blog.csdn.net/lizhongfu2013/a ...
- Qt Quick小项目 - 登陆界面
开发环境: win8 + Qt5.11.2 说明: 用 QML 设计一个应用的登陆界面. 效果图: 新建一个 "Qt Quick Application - empty" 工程,分 ...
- tkinter如何设置界面消失 当制作一个登陆界面时，登陆成功之后，如何让登陆界面本身消失
tkinter如何设置界面消失 当制作一个登陆界面时,登陆成功之后,如何让登陆界面本身消失 if querySQL.checkAll():#用户名和密码都输入正确 self.root.withdraw ...
- Android UI组件----用相对布局RelativeLayout做一个登陆界面
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...
- Unity进阶：用AssetBundle和Json做了一个玩家登陆界面
版权申明: 本文原创首发于以下网站: 博客园『优梦创客』的空间:https://www.cnblogs.com/raymondking123 优梦创客的官方博客:https://91make.top ...
随机推荐
- TCP三次握手四次挥手相关问题探讨
TCP的握手挥手和状态转换是很多网络问题的基础.在此进行相关问题的讨论及记录. 首先,这幅图大致介绍了TCP连接和断开的过程: 注意其中的几个状态: LISTEN, SYN-SEND, SYN-RCV ...
- SCSI contrller的几种类型的区别
在VMware vSphere Web Client中, 可以为虚拟机添加一个新的SCSI controller, 选项中包含如下的类型, 那么他们有什么区别呢? 如何选择呢? BusLogic ...
- Handler Thread 内部类引起内存泄露分析
非静态内部类引起内存泄漏的原因 内部类的实现其实是通过编译器的语法糖(Syntactic sugar)实现的,通过生成相应的子类即以OutClassName$InteriorClassName命名的C ...
- C#匿名方法与Delegate类型转换错误
问题描述 C#2.0出现了匿名方法, 这在一定程度上节省了我们维护代码上下文的精力, 也不需要思考为某个方法取什么名字比较合适. 在FCL的一些方法中要求传入一个Delegate类型的参数, 比如Co ...
- liunx step by step(3)
由于我的ubuntu是装载在virtualbox的虚拟机中,怎么实现其中的数据的共享,显得非常的必要:额,具体这么办. 1.安装增强功能.挂载光盘. 打开其相应的终端:fantlam@fantlam- ...
- 系统出现bootmgr is missing解决方式，戴尔dellserver装系统须要特别注意的问题
系统出现bootmgr is missing解决方式,戴尔dellserver装系统须要特别注意的问题 欢迎关注http://blog.csdn.net/aaa123524457 转载请注明出处: h ...
- Golang 中使用多维 map
http://tnt.wicast.tk/2015/11/02/golang-multiple-dimension-map/ Golang 的 XML/JSON 解析库乍看使用起来很方便,只要构造一样 ...
- 交叉编译git
git依赖openssl.zlib. 首先编译openssl ./Configure linux-armv4 shared 修改Makefile,CC.RANLIB.MAKEDEPPROG为对应的交叉 ...
- Python27中Json对中文的处理
应用场景如下:从api下载数据,json解析,存入字典,定期保存.重启程序需要加载保存的文本. 问题1:json中都是unicode串,存到文本里都是些\u*** 解决:关闭ensure_ascii开 ...
- Jquery 获取table当前行内容
$("a[name='checkOriginal']").click(function () { var parent = $(this).parent().parent().fi ...