suchen

Heim >Web-Frontend >js-Tutorial >Beispiel für den Effekt einer jQuery-Maskenebene: Analysis_jquery

Beispiel für den Effekt einer jQuery-Maskenebene: Analysis_jquery

WBOY
WBOYOriginal
2016-05-16 15:19:591043Durchsuche

In diesem Artikel wird der Effekt der jQuery-Maskenebene anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Schauen wir uns zunächst den Beispielcode an: 

<!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>

Tatsächlich ist das Prinzip der Maskenebene sehr einfach.

Ein Div deckt den folgenden Inhalt ab.

Einer der kritischeren CSS-Stile ist

x-Index: Ganzzahlwert

Je größer der Wert ist, desto höher ist er. Je kleiner der Wert, desto niedriger ist er. Es kann eine negative Zahl sein.

Der obige js-Code weist einige Fehler auf. Folgendes wurde korrigiert. 

//显示层
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();
}

Leser, die an weiteren Inhalten zu jQuery-Spezialeffekten interessiert sind, können sich das Spezialthema dieser Website ansehen: „Zusammenfassung gängiger klassischer Spezialeffekte in jQuery“

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Tutorial zum Erlernen der grundlegenden JavaScript-Syntax_Javascript-KenntnisseNächster Artikel：Tutorial zum Erlernen der grundlegenden JavaScript-Syntax_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen