jQuery遮罩层效果实例分析

前端技术 2023/09/06 JavaScript

本文实例分析了jQuery遮罩层效果。分享给大家供大家参考，具体如下：

先来看看示例代码：

<!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\" xml:lang=\"zh\" lang=\"zh\" dir=\"ltr\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
</head>
<body>
<mce:script type=\"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>
<style mce_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:script type=\"text/javascript\">
<!--
function showBox() {
var bH = $(window).height();
var bW = $(window).width();
$(\"#full_box\").css({width:bW,height:bH,display:\"block\"});
var objWH = getObjWh(\'dialog\');
var tbT = objWH.split(\"|\")[0] + \"px\";
var tbL = objWH.split(\"|\")[1] + \"px\";
$(\"#dialog\").css({top:tbT,left:tbL,display:\"block\"});
$(\"#dialog_content\").html(\"<div style=\"text-align:center\" mce_style=\"text-align:center\">正在加载，请稍后...</div>\");
$(window).scroll(function (){ resetBox();});
$(window).resize(function (){ resetBox();});
}
function resetBox() {
var full_box = $(\"#full_box\").css(\"display\");
if (full_box == \'block\') {
var bH = $(window).height();
var bW = $(window).width();
var objWH = getObjWh(\'dialog\');
var tbT = objWH.split(\"|\")[0] + \"px\";
var tbL = objWH.split(\"|\")[1] + \"px\";
$(\"#dialog\").css({top:tbT,left:tbL,display:\"block\"});
}
}
function getObjWh(obj) {
var st = $(window).scrollTop();
var sl = $(window).scrollLeft();
var ch = $(window).height();
var cw = $(window).width();
var objH = $(\"#\"+obj).height();
var objW = $(\"#\"+obj).width();
var objT = Number(st) + (Number(ch) - Number(objH))/2;
var objL = Number(sl) + (Number(cw) - Number(objW))/2;
return objT +\"|\" +objL;
}
function closeBox() {
$(\"#dialog\").css(\"display\",\"none\");
$(\"#full_box\").css(\"display\",\"none\");
}
// -->
</mce:script>
<button id=\"click\" onclick=\"showBox()\">click</button>
<div id=\"full_box\"></div>
<div id=\"dialog\">
<div id=\"dialog_content\"></div>
<div style=\"text-align:center;\" mce_style=\"text-align:center;\">
<a href=\"#\" mce_href=\"#\" onclick=\"closeBox();\">关闭</a>
</div>
</div>
</body>
</html>

其实遮罩层原理很简单。

一个div 遮住下面的内容。

其中比较关键的一个css 样式是

x-index: 整数值

数值越大在越上层，越小就在越下层，可以是负数。

上面的js 代码有部分错误。下面已经修正。

//显示层
function showBox(id) {
    var bH = document.body.offsetHeight;//$(window).height();
    var bW = document.body.offsetWidth;//$(window).width();
    if (bH < $(window).height())
    {
      bH = $(window).height();
    }
    $(\"#full_box\").css({width:bW,height:bH,display:\"block\"});
    var objWH = getObjWh(\'dialog\');
    var tbT = objWH.split(\"|\")[0] + \"px\";
    var tbL = objWH.split(\"|\")[1] + \"px\";
    if(id==\'template\'){
      $(\"#div_template\").show();
    }else if(id == \'history\'){
      $(\"#div_history\").show();
    }else{
      $(\"#tree_\"+id).show();
    }
    $(window).scroll(function (){ resetBox(id);});
    $(window).resize(function (){ resetBox(id);});
}
//重置层
function resetBox(id) {
    var full_box = $(\"#full_box\").css(\"display\");
    if (full_box == \'block\') {
      var bH = document.body.offsetHeight;//$(window).height();
      var bW = document.body.offsetWidth;//$(window).width();
      if (bH < $(window).height())
      {
        bH = $(window).height();
      }
      var objWH = getObjWh(\'dialog\');
      var tbT = objWH.split(\"|\")[0] + \"px\";
      var tbL = objWH.split(\"|\")[1] + \"px\";
      $(\".dialog\").css({top:tbT,left:tbL});
      $(\"#full_box\").css({width:bW,height:bH});
    }
}
//获得层参数
function getObjWh(obj) {
    var st = $(window).scrollTop();
    var sl = $(window).scrollLeft();
    var ch = $(window).height();
    var cw = $(window).width();
    var objH = $(\"#\"+obj).height();
    var objW = $(\"#\"+obj).width();
    var objT = Number(st) + (Number(ch) - Number(objH))/2;
    var objL = Number(sl) + (Number(cw) - Number(objW))/2;
    return objT +\"|\" +objL;
}
//关闭层
function closeBox(id) {
    if(id == \'template\'){
       $(\"#div_template\").hide();
    }else if(id == \'history\'){
      $(\"#div_history\").hide();
    }else{
      $(\"#tree_\"+id).hide();
    }
    $(\"#full_box\").hide();
}

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》

希望本文所述对大家jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/15026

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案