一个登陆界面

预览截图

html部分

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <link type="text/css" rel="stylesheet" href="login.css"/>
 6 <script src="jquery-1.10.2.js" type="text/javascript"></script>
 7 <script type="text/javascript" src="login.js"></script>
 8 </head>
 9 <body>
10 <div id="home">
11     <form id="login" class="current1" method="post">           
12         <h3>用户登入</h3>
13         <img class="avator" src="./images/avatar.png" width="96" height="96"/>
14         <label>邮箱/名称<input type="text" name="userName" style="215px;" /><span>邮箱为空</span></label>
15         <label>密码<input type="password" name="pass"  /><span>密码为空</span></label>
16         <button type="button">登入</button>   
17     </form> 
18 </div>
19 </body>
20 </html>

css代码部分

 1 *{padding: 0;margin: 0;}
 2 
 3 /* 清除浮动 */
 4 .clearfix:after {content: "";display: table;clear: both;}
 5 html, body { height: 100%; }
 6 body {    
 7 font-family:"Microsoft YaHei"; background:#EBEBEB; background:url(./images/stardust.png);       
 8 font-weight: 300;  font-size: 15px;  color: #333;overflow: hidden;}
 9 a {text-decoration: none; color:#000;}
10 a:hover{color:#F87982;}
11 
12 /*home*/
13 #home{padding-top:100px;}
14 
15 /*logint界面*/
16 #login{ 
17 padding:20px 30px 30px; width:300px; background:#FFF; margin:auto;
18 border-radius: 3px;
19 box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
20 }
21 
22 .current1{
23 -moz-transform: scale(0);     /* for Firefox 缩放比例 */  
24 -webkit-transform: scale(0);  /* for Chrome || Safari 缩放比例 */
25 -o-transform: scale(0);       /* for Opera            缩放比例 */
26 -ms-transform: scale(0);      /* for IE 缩放比例 */
27 transform: scale(0); 
28 -moz-transition: all 0.4s ease-in-out;  
29 -webkit-transition: all 0.4s ease-in-out;
30 -o-transition: all 0.4s ease-in-out;
31 transition: all 0.4s ease-in-out; 
32 /*
33 * CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。
34 * 这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值
35 */
36 }
37 
38 .current{
39 -moz-transform: scale(1);
40 -webkit-transform: scale(1);
41 -o-transform: scale(1);
42 -ms-transform: scale(1);
43 transform: scale(1);
44 }
45 
46 #login h3{ font-size:18px; line-height:25px; font-weight:300; letter-spacing:3px; margin-bottom:20px; color:#C8C8C8; text-align:center;}
47 #login label{ color:#C8C8C8; display:block; height:35px; padding:0 10px; font-size:12px; line-height:35px;  background:#EBEBEB; margin-bottom:10px;position:relative;}
48 #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:1; position:relative;  }
49 #login label  span{ display:block;  height:35px; color:#F30; width:100px; position:absolute; top:0; left:190px; text-align:right;padding:0 10px 0 0; z-index:0; display:none; }
50 #login button{ 
51 font-family:"Microsoft YaHei"; 
52 cursor:pointer;
53 width:300px;  
54 height:35px; 
55 background:#FE4E5B; border:none; font-size:14px; line-height:30px;  letter-spacing:3px; color:#FFF; position:relative; margin-top:10px;
56 -moz-transition: all 0.2s ease-in;
57 -webkit-transition: all 0.2s ease-in;
58 -o-transition: all 0.2s ease-in;
59 transition: all 0.2s ease-in;}
60 #login button:hover{ background:#F87982; color:#000;}
61 
62 /*头像*/
63 .avator{
64     display:block;
65     margin:0 auto 20px;
66     border-radius:50%;
67 }

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请求 实现注册功能
         */
    });
    
});