【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 ...
随机推荐
- Objective-c:NSFileHandle类,创建流对象,对文件进行写入、读取的操作
NSFileHandle类:它需要配合NSFileManager文件管理类,对文件内容进行操作,写入数据.读取数据. 使用步骤: 1.打开文件获取NSFileHandle类的对象 2. ...
- 第六章 HashSet源码解析
6.1.对于HashSet需要掌握以下几点 HashSet的创建:HashSet() 往HashSet中添加单个对象:即add(E)方法 删除HashSet中的对象:即remove(Object ke ...
- HttpWebRequest的使用
HttpWebRequest类主要利用HTTP 协议和服务器交互,通常是通过 GET 和 POST 两种方式来对数据进行获取和提交.下面对这两种方式进行一下说明: GET 方式 GET 方式通过在网络 ...
- Android之PowerManager&BatteryManager
PowerManager是Android平台中用于管理控制设备电源状态.重启.休眠状态.唤醒等,使用该API会影响到电池的待机时间,所以无非必要,一般不要使用. 在PowerManager中有几个比较 ...
- 国内各视频网站android pad客户端支持分辨率情况初步统计
视频网站名称 800*600 1024*600 1280*800 其他 国际化 备注 优酷 支持 支持 支持 支持 不支持 土豆网 没有pad版的 没有pad版的 没有pad版的 支持 不 ...
- 【Ansible】Playbook实例
Learn to build Ansible playbooks with our guide, one step at a time In our previous posts, we introd ...
- 【Python】Django数据模型、级联删除、级联更新、ER图导出等
在本文中,我们将向读者详细介绍如何在更新和删除父表数据的同时,触发有关子表数据的级联更新和删除操作.您将看到当使用InnoDB表的时候,借助于外键约束就可以轻松搞定这一过程. 一.利用外键约束更新并删 ...
- Python模拟登录wap版百度贴吧+自己主动回贴
模拟登录的原理都差点儿相同.大致都是这样: 打开首页获取相关cookie: 提交登陆表单(即username与password). 确认是否登录成功. 假设想了解更具体的原理与相关知识,推荐到具体解释 ...
- easyui tree 搜索
关键代码: var value=$('#txt_search').val(); var childrens = $('#regionTree').tree('getChildren'); $.each ...
- 吐槽一下Page Restore
以前觉得Page Restore确实挺好用的,而且确实用Page Restore快速解决过一些问题.但是仔细想想很多时候Page Restore可能根本用不上. 因为SQL Server在备份的时候是 ...