JQuery学习笔记(三)遮罩层、阴影层

在AJAX横行的时代，使用JQuery实现的阴影层功能对于用户登陆很方便。其主要实现原理有：

一个用于遮罩的背景层，css代码为

Css 代码

1. #BigDiv{position:absolute; top:0px; left:0px; background:#777; filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3; z-index:1000; display:none; width:100%;}

#BigDiv{position:absolute; top:0px; left:0px; background:#777; filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3; z-index:1000; display:none; 100%;}

点击按钮后弹出遮罩层，并显示登陆窗口或者是别的东西，点击关闭后隐藏背景层。(其中我加了些JQ的特效)。js代码为

Javascript 代码

1. $("#bt1").click(function(){
2.         var sHeight;
3.         if(window.screen.availHeight > document.body.scrollHeight)
4.         { //当高度少于一屏
5.             sHeight = window.screen.availHeight-140;
6.         }
7.         else
8.         {//当高度大于一屏
9.             sHeight = document.body.scrollHeight+15;   
10.         }
11.         $("#BigDiv").css("height",sHeight+"px");
12.         $("#BigDiv").css("display","block");
13.         setTimeout(function(){$("#Demo").fadeIn();},500)
14.     });
15.     $("#Close").click(function(){
16.         $("#Demo").fadeOut();
17.         setTimeout(function(){$("#BigDiv").css("display","none");},500);
18.     });

$("#bt1").click(function(){
var sHeight;
if(window.screen.availHeight > document.body.scrollHeight)
{ //当高度少于一屏
sHeight = window.screen.availHeight-140;
}
else
{//当高度大于一屏
sHeight = document.body.scrollHeight+15;
}
$("#BigDiv").css("height",sHeight+"px");
$("#BigDiv").css("display","block");
setTimeout(function(){$("#Demo").fadeIn();},500)
});
$("#Close").click(function(){
$("#Demo").fadeOut();
setTimeout(function(){$("#BigDiv").css("display","none");},500);
});

如果页面过长，拖动滚动条后，让你的登陆窗口或者别的窗口始终保持在浏览器的中央。其中我调用了谷歌提供的一些共用js。

Javascript 代码

1. //以下为共用js，别的地方通用//
2. // 计算当前窗口的宽度 //
3. function pageWidth(){
4.              return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
5. }
6.  
7. // 计算当前窗口的高度 //
8. function pageHeight(){
9.              return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
10. }
11.  
12. // 计算当前窗口的上边滚动条//
13. function topPosition(){
14.               return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
15. }
16.  
17. // 计算当前窗口的左边滚动条//
18. function leftPosition(){
19.              return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
20. }
21.  
22. //解决外嵌样式style , 用js获取不到的问题。
23. function getStyle(elem, name){
24.             if(elem.style[name])
25.                 return elem.style[name];
26.             else if(elem.currentStyle)    //ie
27.                 return elem.currentStyle[name];
28.             else if(document.defaultView && document.defaultView.getComputedStyle){    //w3c
29.                 name = name.replace(/([A-Z])/g,"-$1");
30.                 name = name.toLowerCase();
31.                 
32.                 var s = document.defaultView.getComputedStyle(elem,"");
33.                 return s && s.getPropertyValue(name);
34.             } else
35.                 return null
36. }

//以下为共用js，别的地方通用//
// 计算当前窗口的宽度 //
function pageWidth(){
return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}
// 计算当前窗口的高度 //
function pageHeight(){
return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}
// 计算当前窗口的上边滚动条//
function topPosition(){
return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
}
// 计算当前窗口的左边滚动条//
function leftPosition(){
return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
}
//解决外嵌样式style , 用js获取不到的问题。
function getStyle(elem, name){
if(elem.style[name])
return elem.style[name];
else if(elem.currentStyle) //ie
return elem.currentStyle[name];
else if(document.defaultView && document.defaultView.getComputedStyle){ //w3c
name = name.replace(/([A-Z])/g,"-$1");
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem,"");
return s && s.getPropertyValue(name);
} else
return null
}

实现窗口随着滚动条滚动的js代码

Javascript 代码

1.     window.onscroll = window_onscroll;
2.     function window_onscroll(){
3.         var MyDiv =document.getElementById("Demo");
4.         var MyDiv_h = getStyle(MyDiv,"height");
5.         MyDiv_h = parseInt(MyDiv_h);
6.         var height = pageHeight();
7.         var top = topPosition();
8.         var Div_topposition = top + (height / 2) - (MyDiv_h / 2); //计算上边距
9.         MyDiv.style.top =  Div_topposition + "px";
10.     }

 window.onscroll = window_onscroll;
function window_onscroll(){
var MyDiv =document.getElementById("Demo");
var MyDiv_h = getStyle(MyDiv,"height");
MyDiv_h = parseInt(MyDiv_h);
var height = pageHeight();
var top = topPosition();
var Div_topposition = top + (height / 2) - (MyDiv_h / 2); //计算上边距
MyDiv.style.top =  Div_topposition + "px";
}

DEMO