jQuery遮罩层效果实例分析
本文实例分析了jQuery遮罩层效果。分享给大家供大家参考，具体如下：
先来看看示例代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh"lang="zh"dir="ltr">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
</head>
<body>
<mce:scripttype="text/javascript"src="jquery-1.4.4.min.js"mce_src="jquery-1.4.4.min.js"></mce:script>
<title>Example|xHTML1.0</title>
<mce:style>
<!--*{
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}
#full_box{
background-color:gray;
display:none;
z-index:3;
position:absolute;
left:0px;
top:0px;
filter:Alpha(Opacity=30);
/*IE*/
-moz-opacity:0.4;
/*Moz+FF*/
opacity:0.4;
}
#dialog{
position:absolute;
width:200px;
height:200px;
background:#F00;
display:none;
z-index:5;
}
-->
</mce:style>
<stylemce_bogus="1">
*{
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}
#full_box{
background-color:gray;
display:none;
z-index:3;
position:absolute;
left:0px;
top:0px;
filter:Alpha(Opacity=30);
/*IE*/
-moz-opacity:0.4;
/*Moz+FF*/
opacity:0.4;
}
#dialog{
position:absolute;
width:200px;
height:200px;
background:#F00;
display:none;
z-index:5;
}
</style>
<mce:scripttype="text/javascript">
<!--
functionshowBox(){
varbH=$(window).height();
varbW=$(window).width();
$("#full_box").css({width:bW,height:bH,display:"block"});
varobjWH=getObjWh('dialog');
vartbT=objWH.split("|")[0]+"px";
vartbL=objWH.split("|")[1]+"px";
$("#dialog").css({top:tbT,left:tbL,display:"block"});
$("#dialog_content").html("<divstyle="text-align:center"mce_style="text-align:center">正在加载，请稍后...</div>");
$(window).scroll(function(){resetBox();});
$(window).resize(function(){resetBox();});
}
functionresetBox(){
varfull_box=$("#full_box").css("display");
if(full_box=='block'){
varbH=$(window).height();
varbW=$(window).width();
varobjWH=getObjWh('dialog');
vartbT=objWH.split("|")[0]+"px";
vartbL=objWH.split("|")[1]+"px";
$("#dialog").css({top:tbT,left:tbL,display:"block"});
}
}
functiongetObjWh(obj){
varst=$(window).scrollTop();
varsl=$(window).scrollLeft();
varch=$(window).height();
varcw=$(window).width();
varobjH=$("#"+obj).height();
varobjW=$("#"+obj).width();
varobjT=Number(st)+(Number(ch)-Number(objH))/2;
varobjL=Number(sl)+(Number(cw)-Number(objW))/2;
returnobjT+"|"+objL;
}
functioncloseBox(){
$("#dialog").css("display","none");
$("#full_box").css("display","none");
}
//-->
</mce:script>
<buttonid="click"onclick="showBox()">click</button>
<divid="full_box"></div>
<divid="dialog">
<divid="dialog_content"></div>
<divstyle="text-align:center;"mce_style="text-align:center;">
<ahref="#"mce_href="#"onclick="closeBox();">关闭</a>
</div>
</div>
</body>
</html>
其实遮罩层原理很简单。
一个div遮住下面的内容。
其中比较关键的一个css样式是
x-index:整数值
数值越大在越上层，越小就在越下层，可以是负数。
上面的js代码有部分错误。下面已经修正。
//显示层
functionshowBox(id){
varbH=document.body.offsetHeight;//$(window).height();
varbW=document.body.offsetWidth;//$(window).width();
if(bH<$(window).height())
{
bH=$(window).height();
}
$("#full_box").css({width:bW,height:bH,display:"block"});
varobjWH=getObjWh('dialog');
vartbT=objWH.split("|")[0]+"px";
vartbL=objWH.split("|")[1]+"px";
if(id=='template'){
$("#div_template").show();
}elseif(id=='history'){
$("#div_history").show();
}else{
$("#tree_"+id).show();
}
$(window).scroll(function(){resetBox(id);});
$(window).resize(function(){resetBox(id);});
}
//重置层
functionresetBox(id){
varfull_box=$("#full_box").css("display");
if(full_box=='block'){
varbH=document.body.offsetHeight;//$(window).height();
varbW=document.body.offsetWidth;//$(window).width();
if(bH<$(window).height())
{
bH=$(window).height();
}
varobjWH=getObjWh('dialog');
vartbT=objWH.split("|")[0]+"px";
vartbL=objWH.split("|")[1]+"px";
$(".dialog").css({top:tbT,left:tbL});
$("#full_box").css({width:bW,height:bH});
}
}
//获得层参数
functiongetObjWh(obj){
varst=$(window).scrollTop();
varsl=$(window).scrollLeft();
varch=$(window).height();
varcw=$(window).width();
varobjH=$("#"+obj).height();
varobjW=$("#"+obj).width();
varobjT=Number(st)+(Number(ch)-Number(objH))/2;
varobjL=Number(sl)+(Number(cw)-Number(objW))/2;
returnobjT+"|"+objL;
}
//关闭层
functioncloseBox(id){
if(id=='template'){
$("#div_template").hide();
}elseif(id=='history'){
$("#div_history").hide();
}else{
$("#tree_"+id).hide();
}
$("#full_box").hide();
}
更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。