网页制作学习5----博客前端之登录框的弹出与消失

效果：用户点击登录，即会弹出一个登录框，点击叉叉图片按钮，就会消失

上一节课那个绝对定位：

之前那个是
#header ul{
Position:absolute;
}
现在应该在它的上一级设置一个相对点：
#header.member{
Position:relative;
}
然后把那个
#header ul{
left:0}


1、登录框，设计界面，
<div class="login">登录</div>
#header.login{
Float:right
Width:35px;
Height:30px;
Line-height:3-px;
Cursor:pointer;
}
//上面这个就是在个人中心旁边的登录两个字

2、做登录框的话，就单独做一个div

<div id="login">
<h2><img src="images/close.png" alt="" class="close" />网站登录</h2>
//这个关闭图片和那行“网站登录”的字是属于同一行的，所以并列。
<div class="user">帐 号：<input type="text" name="user" class="text" /></div>
<div class="pass">密 码：<input type="password" name="pass" class="text" /></div>
//这两个框要给他们起一个名字，一个叫user，一个叫pass,然后它们的class名字都叫text，方便下面调用
<div class="button"><input type="button" class="submit" value="" /></div>
<div class="other">注册新用户 | 忘记密码？</div> //这一行在弹出框的右下角
</div>
注意，input标签没有结束标签，就后面加一个斜杠
#login {
width:350px;
height:250px;
border:1px solid #ccc;
position:absolute ;//因为后面有一步要把它居中，所以这里暂时设为绝对
display:none;/ /它一开始默认是没有的，后面我设计登录的点击事件把它调出来
}
#login h2 {
height:40px;
line-height:40px;
text-align:center;
font-size:14px;
letter-spacing:1px;
color:#666;
background:url(images/login_header.png) repeat-x; //这个图片本来就是40，像如果是背景这种就直接在css里面设置就可以了，如果是像框框上面那种叉叉图片就要在html里面添加<img>图片
margin:0;
padding:0;
border-bottom:1px solid #ccc; //这个行的下边框要跟那个大框一样
margin:0 0 20px 0; //这行其实是下面要用到把帐号那一行推向去一点
}

效果如下：

 
3、接下来继续编辑css
#login input.text {
width:200px;
height:25px;
border:1px solid #ccc;
background:#fff; //这个是白色
font-size:14px;
} //这个用来编辑那两个框框，帐号和密码
#login div.user, #login div.pass {
font-size:14px;
color:#666;
padding:5px 0; //5px代表着两行要隔开5px
text-align:center;
} //这个是帐号和密码那两个字，一起编辑就用逗号隔开就好了
#login .button {
text-align:center; //记住，居中是这样设置
padding:20px 0;
}
#login input.submit {
width:107px; //因为那张登录的图片就是长度为107，高度是30
height:30px;
background:url(images/login_button.png) no-repeat; //直接把那张图片指为背景图片就行
border:none;
cursor:pointer;
}
#login .other {
text-align:right;//要居右
padding:15px 10px;//上下为15，左右为10
color:#666;
} //这个是对那个注册新用户和忘记密码那行小字的编辑
整个界面做完效果就是这样：
 

4、接下来我们要让这个界面弹出整体处于页面中心：

这里本来我是想直接对这个框进行css编辑，但老师是调了css函数来的：

我们首先要知道整个浏览器的长度和整个浏览器的高度，我们可以这样来获取：
Alert(document.documentElement.clientWidth或者.clientHeight);来获取，得到1024
/*
var top = (document.documentElement.clientHeight - 250) / 2;
var left = (document.documentElement.clientWidth - 350) / 2;
$().getId('login').css('top', top + 'px').css('left', left + 'px');
*/
但是这样用户如果缩小浏览器窗口，它就不居中了，所以这里要写一个用户改变窗口事件
/*
window.onresize = function () {
var top = (document.documentElement.clientHeight - 250) / 2;//就是每次都再算一次
var left = (document.documentElement.clientWidth - 350) / 2;
$().getId('login').css('top', top + 'px').css('left', left + 'px');
}
*/
现在我们把这段代码封装到库里面去，以后居中可以用
//设置物体居中
Base.prototype.center = function (width, height) {
var top = (document.documentElement.clientHeight - 250) / 2;
var left = (document.documentElement.clientWidth - 350) / 2;
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.top = top + 'px';
this.elements[i].style.left = left + 'px';
}
return this;
}


//触发点击事件
Base.prototype.click = function (fn) {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].onclick = fn;
}
return this;
}


//触发浏览器窗口事件
Base.prototype.resize = function (fn) {
window.onresize = fn; //它本身直接用window执行就可以了
return this;
}


5、回到index.js里要这样写：
var login = $().getId('login'); //这样下面所有的都可以用login替换，省掉重复代码。
login.center(350, 250).resize(function () {
login.center(350, 250);
}) ;//让它再画一遍

最后要设计点击登录会出现，点击关闭按钮图片要能关掉
$().getClass('login').click(function () {
login.css('display', 'block');
});
$().getClass('close').click(function () {
login.css('display', 'none');
});

注意，这个出现和消失跟上一节课的不一样，上一节课是hover，这次的是click

base.js的代码

//前台调用
var $ = function (_this) {
return new Base(_this);
}


//基础库
function Base(_this) {
//创建一个数组，来保存获取的节点和节点数组
this.elements = [];
if (_this != undefined) {    //_this是一个对象，undefined也是一个对象，区别与typeof返回的带单引号的'undefined'
this.elements[0] = _this;
}
}


//获取ID节点
Base.prototype.getId = function (id) {
this.elements.push(document.getElementById(id));
return this;
};


//获取元素节点数组
Base.prototype.getTagName = function (tag) {
var tags = document.getElementsByTagName(tag);
for (var i = 0; i < tags.length; i ++) {
this.elements.push(tags[i]);
}
return this;
};


//获取CLASS节点数组
Base.prototype.getClass = function (className, idName) {
var node = null;
if (arguments.length == 2) {
node = document.getElementById(idName);
} else {
node = document;
}
var all = node.getElementsByTagName('*');
for (var i = 0; i < all.length; i ++) {
if (all[i].className == className) {
this.elements.push(all[i]);
}
}
return this;
}


//获取某一个节点
Base.prototype.getElement = function (num) {
var element = this.elements[num];
this.elements = [];
this.elements[0] = element;
return this;
};


//设置CSS
Base.prototype.css = function (attr, value) {
for (var i = 0; i < this.elements.length; i ++) {
if (arguments.length == 1) {
if (typeof window.getComputedStyle != 'undefined') {//W3C
return window.getComputedStyle(this.elements[i], null)[attr];
} else if (typeof this.elements[i].currentStyle != 'undeinfed') {//IE
return this.elements[i].currentStyle[attr];
}
}
this.elements[i].style[attr] = value;
}
return this;
}


//添加Class
Base.prototype.addClass = function (className) {
for (var i = 0; i < this.elements.length; i ++) {
if (!this.elements[i].className.match(new RegExp('(\\s|^)' +className +'(\\s|$)'))) {
this.elements[i].className += ' ' + className;
}
}
return this;
}


//移除Class
Base.prototype.removeClass = function (className) {
for (var i = 0; i < this.elements.length; i ++) {
if (this.elements[i].className.match(new RegExp('(\\s|^)' +className +'(\\s|$)'))) {
this.elements[i].className = this.elements[i].className.replace(new RegExp('(\\s|^)' +className +'(\\s|$)'), ' ');
}
}
return this;
}


//添加link或style的CSS规则
Base.prototype.addRule = function (num, selectorText, cssText, position) {
var sheet = document.styleSheets[num];
if (typeof sheet.insertRule != 'undefined') {//W3C
sheet.insertRule(selectorText + '{' + cssText + '}', position);
} else if (typeof sheet.addRule != 'undefined') {//IE
sheet.addRule(selectorText, cssText, position);
}
return this;
}


//移除link或style的CSS规则
Base.prototype.removeRule = function (num, index) {
var sheet = document.styleSheets[num];
if (typeof sheet.deleteRule != 'undefined') {//W3C
sheet.deleteRule(index);
} else if (typeof sheet.removeRule != 'undefined') {//IE
sheet.removeRule(index);
}
return this;
}


//设置innerHTML
Base.prototype.html = function (str) {
for (var i = 0; i < this.elements.length; i ++) {
if (arguments.length == 0) {
return this.elements[i].innerHTML;
}
this.elements[i].innerHTML = str;
}
return this;
}


//设置鼠标移入移出方法
Base.prototype.hover = function (over, out) {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].onmouseover = over;
this.elements[i].onmouseout = out;
}
return this;
};


//设置显示
Base.prototype.show = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.display = 'block';
}
return this;
}


//设置隐藏
Base.prototype.hide = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.display = 'none';
}
return this;
}


//设置物体居中
Base.prototype.center = function (width, height) {
var top = (document.documentElement.clientHeight - height) / 2;
var left = (document.documentElement.clientWidth - width) / 2;
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.top = top + 'px';
this.elements[i].style.left = left + 'px';
}
return this;
}


//触发点击事件
Base.prototype.click = function (fn) {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].onclick = fn;
}
return this;
}


//触发浏览器窗口事件
Base.prototype.resize = function (fn) {
window.onresize = fn;
return this;
}


index.html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>第34章 项目1-博客前端：下拉菜单</title>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="index.js"></script>
<link rel="stylesheet" type="text/css" href="index.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" /></div>
<div class="pass">密 码：<input type="password" name="pass" class="text" /></div>
<div class="button"><input type="button" class="submit" value="" /></div>
<div class="other">注册新用户 | 忘记密码？</div>
</div>
</body>
</html>


index.js代码

window.onload = function () {

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

//登录框
var login = $().getId('login');
login.center(350, 250).resize(function () {
login.center(350, 250);
});
$().getClass('login').click(function () {
login.css('display', 'block');
});
$().getClass('close').click(function () {
login.css('display', 'none');
});


/*
var top = (document.documentElement.clientHeight - 250) / 2;
var left = (document.documentElement.clientWidth - 350) / 2;
$().getId('login').css('top', top + 'px').css('left', left + 'px');

window.onresize = function () {
var top = (document.documentElement.clientHeight - 250) / 2;
var left = (document.documentElement.clientWidth - 350) / 2;
$().getId('login').css('top', top + 'px').css('left', left + 'px');
}
*/
};


index.css代码：

body {
margin:0;
padding:0;
background:#fff url(images/header_bg.png) repeat-x;
font-size:12px;
color:#333;
}
ul {
padding:0;
margin:0;
}
ul li {
list-style-type: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/arrow.png) no-repeat 55px center;
cursor:pointer;
position:relative;
}
#header ul {
position:absolute;
top:30px;
left:-20px;
background:#FBF7E1;
width:100px;
height:120px;
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;
text-decoration:none;
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;
font-size:14px;
letter-spacing:1px;
color:#666;
background:url(images/login_header.png) repeat-x;
margin:0;
padding:0;
border-bottom:1px solid #ccc;
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;
}
#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;
}