大家在上網(wǎng)瀏覽網(wǎng)頁(yè)時(shí)，有沒(méi)有注意過(guò)，大多數(shù)網(wǎng)站在登錄時(shí)，一般都是鼠標(biāo)滑過(guò)右上角“登錄”時(shí)，會(huì)自動(dòng)彈出一個(gè)登錄框，例如：


其實(shí)這個(gè)效果要實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，下面我給大家用jquery來(lái)演示一下：
首先，我們還是先將html部分寫(xiě)出來(lái)，內(nèi)容如下：
<br><br><br><br><br><br><br>
<div class="login-header">
    <a href="javascript:void(0);">鼠標(biāo)滑過(guò)，彈出登錄框</a>
    <div class="login">
    <div class="login-title">登錄會(huì)員<span><a href="javascript:void(0);" class="close-login">關(guān)閉</a></span></div>
    <div class="login-input-content">
        <div class="login-input">
            <label>用&nbsp;戶(hù)&nbsp;&nbsp;名：</label>
            <input type="text" placeholder="請(qǐng)輸入用戶(hù)名"  name="info[username]" id="username" class="list-input"/>
        </div>
        <div class="login-input">
            <label>登錄密碼：</label>
            <input type="password" placeholder="請(qǐng)輸入登錄密碼" name="info[password]" id="password" class="list-input"/>
        </div>
    </div>
    <div class="login-button"><a href="javascript:void(0);" id="login-button-submit">登錄會(huì)員</a></div>
</div>
</div>
 
<div class="login-bg"></div>
 
以上為html部分，接下來(lái)我們先將js部分代碼寫(xiě)出來(lái)，內(nèi)容如下：
$(function () {
    H_login = {};
    H_login.openLogin = function(){
        $('.login-header').hover(function(){
            $('.login').show();
                   },
                   function(){
            $('.login').hide();
                            })
         };
   /* H_login.closeLogin = function(){
        $('.login-header a').mouseout(function(){
            $('.login').hide();
            $('.login-bg').hide();
        });
    };*/
    H_login.loginForm = function () {
        $("#login-button-submit").on('mouseout',function(){
              var username = $("#username");
              var usernameValue = $("#username").val();
              var password = $("#password");
              var passwordValue = $("#password").val();
            if(usernameValue == ""){
                alert("用戶(hù)名不能為空");
                username.focus();
                return false;
            }else if(usernameValue.length > 15){
                alert("用戶(hù)名長(zhǎng)度不能大于15字符");
                username.focus();
                return false;
            }else if(passwordValue == ""){
                alert("密碼不能為空");
                password.focus();
                return false;
            }else if(passwordValue.length < 6 || passwordValue.length > 30){
                alert("密碼長(zhǎng)度不能小于6或大于30位字符");
                password.focus();
                return false;
            }else{
                alert("登錄成功");
                setTimeout(function(){
                    $('.login').hide();
                    $('.login-bg').hide();
                    $('.list-input').val('');
                },2000);
            }
        });
    };
    H_login.run = function () {
        //this.closeLogin();
        this.openLogin();
        this.loginForm();
    };
    H_login.run();
});
我們用的是hover這個(gè)函數(shù)來(lái)完成的事件，當(dāng)鼠標(biāo)滑過(guò)時(shí)，彈出登錄框，當(dāng)鼠標(biāo)移開(kāi)時(shí)，隱藏登錄框；然后我們又在JS代碼中將登錄框的內(nèi)容寫(xiě)出來(lái)。接下來(lái)我們?cè)僬w寫(xiě)出CSS樣式，內(nèi)容如下：
* {padding:0px;margin:0px auto;}
body {padding:0px;margin:0px auto;font-size:12px;font-family:"微軟雅黑";}
ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a {padding:0px;margin:0px;}
ul,li,ol{list-style:none;}
a{text-decoration:none;color:#000000;}
 
.login-header{width:500px;margin:0 auto;height:70px;text-align:center;font-size:24px;line-height:30px;position:relative;}
.login{width:500px;position:fixed;border:#ebebeb solid 1px;height:280px;top:35%;left:50%;display:none;background:#ffffff;box-shadow:0px 0px 20px #ddd;z-index:9999;margin-left:-250px;margin-top:-140px;}
.login-title{width:100%;margin:10px 0px 0px 0px;text-align:center;line-height:40px;height:40px;font-size:18px;position:relative;}
.login-title span{position:absolute;font-size:12px;right:-20px;top:-30px;background:#ffffff;border:#ebebeb solid 1px;width:40px;height:40px;border-radius:20px;}
.login-title span a{display:block;}
.login-input-content{margin-top:20px;}
.login-input {overflow:hidden;margin:0px 0px 20px 0px;}
.login-input label{float:left;width:90px;padding-right:10px;text-align:right;line-height:35px;height:35px;font-size:14px;}
.login-input input.list-input{float:left;line-height:35px;height:35px;width:350px;border:#ebebeb 1px solid;text-indent:5px;}
.login-button{width:50%;margin:30px auto 0px auto;line-height:40px;font-size:14px;border:#ebebeb 1px solid;text-align:center;}
.login-button a{display:block;}
.login-bg{width:100%;height:100%;position:fixed;top:0px;left:0px;background:#ebebeb;filter:alpha(opacity=30);-moz-opacity:0.3;-khtml-opacity:0.3;opacity:0.3;display:none;}
以上我們要做的鼠標(biāo)滑過(guò)，彈出登錄框；鼠標(biāo)滑開(kāi)，隱藏登錄框的效果就做出來(lái)了。至于樣式上的細(xì)節(jié)大家還可以再自行調(diào)整。怎么樣？北京網(wǎng)站建設(shè)你學(xué)會(huì)了嗎？