网页制作学习6----博客前端之锁屏和遮罩

这次继续上一次课的内容，在弹出登录框的同时，在后面设置锁屏和遮罩

效果：

第一步：创建一个可以布满整个浏览器的 div，将它 z-index层结构设置为 9998，而 login

弹窗的 div设置为 9999，高一层。这样就可以锁屏+遮罩

<div id=”screen”></div>//整个.html里面就加这么一句就是一个全局的元素

它的css：

#screen {

         position:absolute;

         top:0;

         left:0;

         background:#000;

         z-index:9998;

         filter:alpha(opacity=30);// Opacity属性用来设置一个元素的透明度，取值范围是0~1之间，不可为负值。opacity取值为1是完全不透明，取值为0是完全透明，视觉上看不见，但这个是IE浏览器用的。

         opacity:0.3;//火狐和谷歌用的是这个

         display:none;//同样，先是看不见的，点击登录之后才会和登录框一起出现

}

         我现在的screen的z-index就是层次已经很高了，是9998，但是我的整个login的框要比它更高，要变成9999，还要给我们的那个登录框设置一个背景颜色白色，之前我们没有做它还是透明的呢。

修改后的css中的login如下：

#login {

         width:350px;

         height:250px;

         border:1pxsolid #ccc;

         position:absolute;

         display:none;

         z-index:9999;

         background:#fff;//记住，这个是白色

}

        

第二步：接下来要在base.js里面再封装两个函数，设置一个锁屏功能和解锁功能：

//锁屏功能

Base.prototype.lock = function () {

         for(var i = 0; i < this.elements.length; i ++) {

                   this.elements[i].style.width= getInner().width + 'px';

                   this.elements[i].style.height= getInner().height + 'px';

                   this.elements[i].style.display= 'block';

         }

         returnthis;

};

//解锁功能

Base.prototype.unlock = function () {

         for(var i = 0; i < this.elements.length; i ++) {

                   this.elements[i].style.display= 'none';

         }

         returnthis;

}

 

第三步：最后，我们重新修改一下上一次的index.js里面的代码（是关于resize的）

//这个是原来版本

         varlogin = $().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');

         });

        

        

//登录框

         varlogin = $().getId('login');

         varscreen = $().getId('screen');

         login.center(350,250);

         $().resize(function() {//resize用的直接是windows的函数，所以根本不用获取对象，只需在里面获取就行了

                   login.center(350,250);

                   if(login.css('display') == 'block') {//避免你没有点登录就改变窗口，它就被锁定了

                            screen.lock();

                   }

         });

         $().getClass('login').click(function() {

                   login.css('display','block');

                   screen.lock();

         });

         $().getClass('close').click(function() {

                   login.css('display','none');

                   screen.unlock();

         });

        

 

 

第四步：最后，我们来处理一个比较麻烦的问题，就是关于Lock函数的屏幕大小的问题

注意，这里如果我使用:

this.elements[i].style.height=document.documentElement.clientHeight+’px,

’用户如果缩小屏幕的话，它还是保留1024那么大小，用户体验就不好。

如果我使用window.innerHeight这个参数的话，IE浏览器不支持，要做跨浏览器又繁琐，

所以，要像下面这样处理。

新建一个新文件：tool.js 添加一些跨浏览器的方法

//跨浏览器获取视口大小

function getInner() {

         if(typeof window.innerWidth != 'undefined') {

                   return{

                            width: window.innerWidth,

                            height: window.innerHeight

                   }//第一次看到return这种写法

         }else {

                   return{

                            width: document.documentElement.clientWidth,

                            height: document.documentElement.clientHeight

                   }

         }

}

所以上面使用的时候才能用：

                  this.elements[i].style.width =getInner().width + 'px';

                   this.elements[i].style.height= getInner().height + 'px';

 

再来封装一些跨浏览器的函数：

//跨浏览器获取Style

function getStyle(element, attr) {

         if(typeof window.getComputedStyle != 'undefined') {//W3C

                   returnwindow.getComputedStyle(element, null)[attr];

         }else if (typeof element.currentStyle != 'undeinfed') {//IE

                   returnelement.currentStyle[attr];

         }

}

 

//判断class是否存在

function hasClass(element, className) {

         returnelement.className.match(new RegExp('(\\s|^)' +className +'(\\s|$)'));

}

 

//跨浏览器添加link规则

function insertRule(sheet, selectorText,cssText, position) {

         if(typeof sheet.insertRule != 'undefined') {//W3C

                   sheet.insertRule(selectorText+ '{' + cssText + '}', position);

         }else if (typeof sheet.addRule != 'undefined') {//IE

                   sheet.addRule(selectorText,cssText, position);

         }

}

 

//跨浏览器移出link规则

function deleteRule(sheet, index) {

         if(typeof sheet.deleteRule != 'undefined') {//W3C

                   sheet.deleteRule(index);

         }else if (typeof sheet.removeRule != 'undefined') {//IE

                   sheet.removeRule(index);

         }

}

 

 下面附上李炎恢老师的代码：index.html   index.js  base.js tool.js  index.css

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="tool.js"></script>
<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>

<div id="screen"></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');
var screen = $().getId('screen');
login.center(350, 250);
$().resize(function () {
login.center(350, 250);
if (login.css('display') == 'block') {
screen.lock();
}
});
$().getClass('login').click(function () {
login.css('display', 'block');
screen.lock();
});
$().getClass('close').click(function () {
login.css('display', 'none');
screen.unlock();
});

//$().addRule(0, 'html', 'font-size:200px', 0);
//$().removeRule(0);


};



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) {
return getStyle(this.elements[i], 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 (!hasClass(this.elements[i], className)) {
this.elements[i].className += ' ' + className;
}
}
return this;
}


//移除Class
Base.prototype.removeClass = function (className) {
for (var i = 0; i < this.elements.length; i ++) {
if (hasClass(this.elements[i], className)) {
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];
insertRule(sheet, selectorText, cssText, position);
return this;
}


//移除link或style的CSS规则
Base.prototype.removeRule = function (num, index) {
var sheet = document.styleSheets[num];
deleteRule(sheet, 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 - 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.lock = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.width = getInner().width + 'px';
this.elements[i].style.height = getInner().height + 'px';
this.elements[i].style.display = 'block';
}
return this;
};


Base.prototype.unlock = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.display = 'none';
}
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;
}



tool.js

//跨浏览器获取视口大小
function getInner() {
if (typeof window.innerWidth != 'undefined') {
return {
width : window.innerWidth,
height : window.innerHeight
}
} else {
return {
width : document.documentElement.clientWidth,
height : document.documentElement.clientHeight
}
}
}

//跨浏览器获取Style
function getStyle(element, attr) {
if (typeof window.getComputedStyle != 'undefined') {//W3C
return window.getComputedStyle(element, null)[attr];
} else if (typeof element.currentStyle != 'undeinfed') {//IE
return element.currentStyle[attr];
}
}




//判断class是否存在
function hasClass(element, className) {
return element.className.match(new RegExp('(\\s|^)' +className +'(\\s|$)'));
}




//跨浏览器添加link规则
function insertRule(sheet, selectorText, cssText, position) {
if (typeof sheet.insertRule != 'undefined') {//W3C
sheet.insertRule(selectorText + '{' + cssText + '}', position);
} else if (typeof sheet.addRule != 'undefined') {//IE
sheet.addRule(selectorText, cssText, position);
}
}


//跨浏览器移出link规则
function deleteRule(sheet, index) {
if (typeof sheet.deleteRule != 'undefined') {//W3C
sheet.deleteRule(index);
} else if (typeof sheet.removeRule != 'undefined') {//IE
sheet.removeRule(index);
}
}


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;
}
#screen {
position:absolute;
top:0;
left:0;
background:#000;
z-index:9998;
filter:alpha(opacity=30);
opacity:0.3;
display:none;
}
#login {
width:350px;
height:250px;
border:1px solid #ccc;
position:absolute;
display:none;
z-index:9999;
background:#fff;
}
#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;
}