大家在浏览器网页时，有没有注意过，大多数网站在登录时，一般都是鼠标滑过右上角登录时，会自动弹出一个登录框，例如： 其实这个效果要实现起来很简单，下面我给大家用jquery来演示一下： 首先，我们还是先将html部分写出来，内容如下： brbrbrbrbrbrbr div
大家在上网浏览网页时，有没有注意过，大多数网站在登录时，一般都是鼠标滑过右上角“登录”时，会自动弹出一个登录框，例如：
其实这个效果要实现起来很简单，下面我给大家用jquery来演示一下：
首先，我们还是先将html部分写出来，内容如下：
<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">关闭</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部分代码写出来，内容如下：
$(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这个函数来完成的事件，当鼠标滑过时，弹出登录框，当鼠标移开时，隐藏登录框；然后我们又在JS代码中将登录框的内容写出来。接下来我们再整体写出CSS样式，内容如下：
* {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;}
以上我们要做的鼠标滑过，弹出登录框；鼠标滑开，隐藏登录框的效果就做出来了。至于样式上的细节大家还可以再自行调整。怎么样？北京网站建设你学会了吗？
