一个前端博客(4)——登录框效果

这里我们要实现一个登录框效果，如下图:

一个前端博客(4)——登录框效果

点击登录后，弹出登录框，点击登录框的“X“，登录框消失。登录框要一直水平垂直居中。

先给出html和css代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="header">
        <div class="logo">
            <img src="images/logo.gif" alt="">
        </div>
        <div class="member">个人中心
            <ul class="member_ul">
                <li><a href="#">设置</a></li>
                <li><a href="#">换肤</a></li>
                <li><a href="#">帮助</a></li>
                <li><a href="#">退出</a></li>
            </ul>
        </div>
        <div class="login">登录</div>
    </div>
    <div id="login">
        <h2><img src="images/close.png" alt="" class="close">网站登录</h2>
        <div class="user">账 号:<input type="text" name="user" class="text" placeholder="账号"></div>
        <div class="pass">密 码:<input type="password" name="pass" placeholder="密码" class="text"></div>
        <div class="button"><input type="button" class="submit" value="" /></div>
        <div class="other">注册新用户 | 忘记密码？</div>
    </div>
    <script src="js/tar.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

body{margin:0;padding:0;background: url(../images/header_bg.png) repeat-x;font-size: 12px;color:#333;}
ul{margin:0;padding:0;}
ul li{list-style-type: none;margin:0;padding:0;}
a{text-decoration: none;}
#header{
    width:900px;
    height:30px;
    margin:0 auto;
}
#header .logo{
    width:100px;
    height:30px;
    float: left;
}
#header .logo img{
    display: block;
}
#header .member{
    width:70px;
    height:30px;
    line-height: 30px;
    float: right;
    background: url(../images/arrow2.png) no-repeat 55px center;
    cursor:pointer;
    position: relative;
}
#header ul{
    position: absolute;
    left:-20px;
    top:30px;
    width:100px;
    height:120px;
    background: #FBF7E1;
    border:1px solid #999;
    border-top:none;
    padding:10px 0 0 0;
    display: none;
}
#header ul li{
    height:25px;
    line-height: 25px;
    text-indent: 20px;
    letter-spacing: 1px;
}
#header ul li a{
    display: block;
    color:#333;
    background: url(../images/arrow3.gif) no-repeat 5px 45%;
}
#header ul li a:hover{
    background: #fc0 url(../images/arrow4.gif) no-repeat 5px 45%;
}
#header .login{
    float: right;
    width:35px;
    height:30px;
    line-height: 30px;
    cursor: pointer;
}
#login{
    width:350px;
    height:250px;
    border:1px solid #ccc;
    position: absolute;
    display: none;
}
#login h2{
    height:40px;
    line-height: 40px;
    text-align: center;
    background: url(../images/login_header.png) repeat-x;
    margin:0;padding:0;
    border-bottom: 1px solid #ccc;
    color:#666;
    font-size: 14px;
    letter-spacing: 1px;
    margin:0 0 20px 0;
}
#login h2 img{float: right;position: relative;top:14px;right:8px;cursor: pointer;}
#login div.user, #login div.pass{
    font-size: 14px;
    color:#666;
    padding:5px 0;
    text-align: center;
}
#login input.text{
    width:200px;
    height:25px;
    border:1px solid #ccc;
    background: #fff;
    font-size: 14px;
    outline:none;
}
#login .button{
    text-align: center;
    padding:20px 0;
}
#login input.submit{
    width:107px;
    height:30px;
    background: url(../images/login_button.png) no-repeat;
    border:none;
    cursor: pointer;
}
#login .other{
    text-align: right;
    padding:15px 10px;
    color:#666;
}

这部分通过上次我们的tar.js就可以实现,

个人中心

//个人中心
    $().getClass('member').hover(function(){
        $(this).css('background','url(../blog/images/arrow.png) no-repeat 55px center');
        $().getClass('member_ul').show();
    },function() {
        $(this).css('background','url(../blog/images/arrow2.png) no-repeat 55px center');
        $().getClass('member_ul').hide();
    });

给class为member的div添加hover方法，当滑入区域的时候，将背景图片换成arrow.png，同时列表展现，当滑出的时候，背景图片换回arrow2.png,同时列表隐藏。

登录框的实现

实现登录框效果，首先我们先考虑如何让登录框水平垂直居中。通过公式top = (浏览器的Height - 登录框的Height) / 2;left = (浏览器的Height - 登录框的Height) /2;

使用top,left改变登录框的top 和 left，就可以使登录框居中了。别忘了，要为登录框添加绝对定位才行。

我们创建center方法:

Tar.prototype.center = function(w, h) {
    for(var i = 0; i < this.elements.length; i++) {
        var top = (document.documentElement.clientHeight - h) /2;
        var left = (document.documentElement.clientWidth - w) /2;
        this.elements[i].style.top = top + 'px';
        this.elements[i].style.left = left + 'px';
    }
    return this;
}

通过document.documentElement.clientHeight和document.documentElement.clientWidth来取出浏览器的高度和宽度

不过，如果我们改变浏览器大小的话，会发现它不居中了，这个时候我们应该通过onresize事件来调用center方法.这里我们来封装onresize方法.

创建resize方法:

Tar.prototype.resize = function(fn) {
    for(var i = 0; i < this.elements.length; i++) {
        window.onresize = fn;
    }
    return this;
}

这里我们的app.js就是酱紫的:

//登录框
    var login = $().getId("login");
    login.center(350,250).resize(function() {
        login.center(350,250);
    });

然后解决点击”X“关闭登录框，这个很简单，这里我只需扩展一个click方法。然后选中类为close的元素，当点击的时候，执行css方法，使display为none;

我们先创建click方法:

Tar.prototype.click = function(fn) {
    for(var i = 0; i < this.elements.length; i++) {
        this.elements[i].onclick = fn;
    }
    return this;
}

然后在app.js里我们酱紫:

 $().getClass("close").click(function() {
        login.css("display","none");
    });

这样就完成了嘛？没有。我们的登录框开始是隐藏的，所以要添加display：none;同时，当我们点击”登录“的时候，登录框出现。这个和关闭都用到了click方法，代码如下:

 $().getClass("login").click(function() {
        login.css("display","block");
    })

这里我们要注意一个技巧，当有一个值出现超过两次，我们最好给他赋给一个变量，这里就是var login = $().getId("login");

待续.......

一个前端博客(4)——登录框效果

相关推荐