大家在瀏覽器網(wǎng)頁時，有沒有注意過，大多數(shù)網(wǎng)站在登錄時，一般都是鼠標滑過右上角登錄時，會自動彈出一個登錄框，例如： 其實這個效果要實現(xiàn)起來很簡單，下面我給大家用jquery來演示一下： 首先，我們還是先將html部分寫出來，內(nèi)容如下： brbrbrbrbrbrbr div
大家在上網(wǎng)瀏覽網(wǎng)頁時，有沒有注意過，大多數(shù)網(wǎng)站在登錄時，一般都是鼠標滑過右上角“登錄”時，會自動彈出一個登錄框，例如：
其實這個效果要實現(xiàn)起來很簡單，下面我給大家用jquery來演示一下：
首先，我們還是先將html部分寫出來，內(nèi)容如下：
<br><br><br><br><br><br><br>
<div class="login-header">
<a href="javascript:void(0);">鼠標滑過，彈出登錄框</a>
<div class="login">
<div class="login-title">登錄會員<span><a href="javascript:void(0);" class="close-login">關(guān)閉</a></span></div>
<div class="login-input-content">
<div class="login-input">
<label>用 戶 名：</label>
<input type="text" placeholder="請輸入用戶名" name="info[username]" id="username" class="list-input"/>
</div>
<div class="login-input">
<label>登錄密碼：</label>
<input type="password" placeholder="請輸入登錄密碼" name="info[password]" id="password" class="list-input"/>
</div>
</div>
<div class="login-button"><a href="javascript:void(0);" id="login-button-submit">登錄會員</a></div>
</div>
</div>
<div class="login-bg"></div>
以上為html部分，接下來我們先將js部分代碼寫出來，內(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("用戶名不能為空");
username.focus();
return false;
}else if(usernameValue.length > 15){
alert("用戶名長度不能大于15字符");
username.focus();
return false;
}else if(passwordValue == ""){
alert("密碼不能為空");
password.focus();
return false;
}else if(passwordValue.length < 6 || passwordValue.length > 30){
alert("密碼長度不能小于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這個函數(shù)來完成的事件，當(dāng)鼠標滑過時，彈出登錄框，當(dāng)鼠標移開時，隱藏登錄框；然后我們又在JS代碼中將登錄框的內(nèi)容寫出來。接下來我們再整體寫出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;}
以上我們要做的鼠標滑過，彈出登錄框；鼠標滑開，隱藏登錄框的效果就做出來了。至于樣式上的細節(jié)大家還可以再自行調(diào)整。怎么樣？北京網(wǎng)站建設(shè)你學(xué)會了嗎？
