一个前端博客(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");
待续.......