【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:NSMutableArray类的常见操作
可变数组NSMutableArray的内容大小是可变的,因此它的常见操作无非增删该查, 具体一些就是:创建.添加.删除.替换.插入.清空等等.. // // main.m // 02-NSMuta ...
- Objective-C：异常的处理
// // main.m // 03-动态绑定 // // Created by mac on 15/8/11. // Copyright (c) 2015年. All rights reserved ...
- 中国大学MOOC-陈越、何钦铭-数据结构-笔记
中国大学MOOC-陈越.何钦铭-数据结构-2017春 跟着<中国大学MOOC-陈越.何钦铭-数据结构-2017春>学习,平时练习一下pat上的作业外:在这里记录一下:平时学习视屏的收获. ...
- CPC广告反作弊
原文:http://blog.csdn.net/xwm1000/article/details/45460957 CPC广告上线也2年了,从上线以来就一直存在着作弊和反作弊的斗争,刚开始的时候流量少, ...
- 揭开Faiss的面纱 探究Facebook相似性搜索工具的原理
https://www.leiphone.com/news/201703/84gDbSOgJcxiC3DW.html 本月初雷锋网报道,Facebook 开源了 AI 相似性搜索工具 Faiss.而在 ...
- PHP的CLI综合
tip1:传入参数 使用标准的输入和输出 PHP CLI会定义三个常量,以便让在命令行提示符下与解释器进行交互操作更加容易.这些常量见表格A.表格A 常量 说明STDIN 标准的输入设备STDO ...
- uva 10670 Work Reduction(贪心）
题目连接:10670 - Work Reduction 题目大意:有tol的工作量,和要求达到的工作剩余量sur,然后是公司总数,对应每个公司提供两种服务,1.完成一个工作量,2.完成当前未完成工作量 ...
- 笔试题之ejb
ejb部分 1.EJB是基于哪些技术实现的?并说出SessionBean和EntityBean的区别,StatefulBean和StatelessBean的区别. EJB包括Session Bean. ...
- SAP SQ01怎样从开发机传输到生产机
确认你的Query是本地的还是全局的(跨Client).假设是后者,会自己主动生成传输请求,用标准传输方式就可以. 假设是本地的Query,有两种方式: 方式1:复制成全局的,让后生成传输请求 方式2 ...
- 改动Apach默认port
一.改动Apache的默认port号 在WEB SERVER界,无论是微软的IIS还是世界排名第一的Apache,它们安装好后默认的网页服务port号都是80.有必要指出的是,假设你的电脑中已经安装有 ...