【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 ...
随机推荐
- python部分重点底层源码剖析
Python源码剖析—Set容器(hashtable实现) python源码剖析(内存管理和垃圾回收)
- JavaScript中定义对象的四种方式
最近在阅读< JavaScript 高级程序设计>,未免遗忘读过的内容,就打算以博客的形式做些读书笔记.今天介绍的是 JavaScript 中的四种定义对象的方法,除了这四种方法,还有工厂 ...
- xUtils如何通过注解对FindViewById进行封装
之前讲到了介绍了一下xUtils的基本使用方法,今天我们就来详细介绍一下关于xUtils中的ViewUtils模块. 在ViewUtils模块中我们首先看到的是它采用了一种注解的方式进行声明,那么我们 ...
- Reinvent the Wheel Often
Reinvent the Wheel Often Jason P. Sage Just use something that exists-it's silly to reinvent the whe ...
- COM中导出GUID
编写COM组件的时候需要导出GUID,以下是代码示例. extern "C" const GUID CLSID_Dictionary = { 0x54bf656 ...
- idea 本地调用zookeeper配置
- Access2013 Mssql2012 数据库连接字符串
直接在调用的地方设置 // access 2003 DBConStr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Ap ...
- C语言打印字母金字塔（第一行是A 第二行是ABA ……）
#include <stdio.h> #include <stdlib.h> int main() { int line;//代表行数 int i; char letter,c ...
- Discuz常见大问题-如何开启和使用首页四格
在论坛-首页四格中,勾选开启首页四格,然后可以选择数据来源的板块 注意首页四格刷新是有时间的,5分钟左右,不是你这里更新完了帖子那里就有了(如果你自己建的网站,可能回复和热帖都还没有) 当然你也可以使 ...
- ImportError: No module named arcpy
好久没写Python脚本了,今天一运行就报错:未找到名称为 arcpy 的模块(ImportError: No module named arcpy). 多半是环境变量出问题了,Python最令人讨厌 ...