Beispiel für die gemeinsame Nutzung einer jQuery-Implementierung einer Maskierungsfunktion, die mit IE6 kompatibel ist

In diesem Artikel wird hauptsächlich die mit IE6 kompatible Maskenfunktion von jQuery vorgestellt und das Layout, der Stil und die Funktionsimplementierungstechniken der jQuery-Maskenebene im Detail analysiert. Ich hoffe, dass es allen helfen kann .

Der schlankste und leistungsstärkste jQuery-Maskenebeneneffekt.

Wenn der Browser die Größe ändert, ändert sich auch die Größe der Maskenebene entsprechend.

Das Dialogfeld über der Maskenebene kann sich ändern, wenn sich der Bildlauf ändert, d. h. das Dialogfeld wird in der Mitte des Browsers angezeigt.

HTML-Code

<p id="main"><a onclick="showBg();" href="#" rel="external nofollow" rel="external nofollow" >点击这里看 jQuery 遮罩层效果.</a></p>
<p id="fullbg"></p>
<p id="dialog">
<p class="close"><a onclick="closeBg();" href="#" rel="external nofollow" rel="external nofollow" >关闭</a></p>
正在加载，请稍后...
</p>

CSS-Code

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin: 0;
}
#main {
  height: 1800px;
  padding-top: 90px;
  text-align: center;
}
#fullbg {
  background-color: Gray;
  left: 0px;
  opacity: 0.5;
  position: absolute;
  top: 0px;
  z-index: 3;
  filter: alpha(opacity=50); /* IE6 */
  -moz-opacity: 0.5; /* Mozilla */
  -khtml-opacity: 0.5; /* Safari */
}
#dialog {
  background-color: #FFF;
  border: 1px solid #888;
  display: none;
  height: 200px;
  left: 50%;
  margin: -100px 0 0 -100px;
  padding: 12px;
  position: fixed !important; /* 浮动对话框 */
  position: absolute;
  top: 50%;
  width: 200px;
  z-index: 5;
}
#dialog p {
  margin: 0 0 12px;
}
#dialog p.close {
  text-align: right;
}

JQuery-Code

<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//显示灰色 jQuery 遮罩层
function showBg() {
  var bh = $("body").height();
  var bw = $("body").width();
  $("#fullbg").css({
    height:bh,
    width:bw,
    display:"block"
  });
  $("#dialog").show();
}
//关闭灰色 jQuery 遮罩
function closeBg() {
  $("#fullbg,#dialog").hide();
}
</script>
<!--[if lte IE 6]>
<script type="text/javascript">
// 浮动对话框
$(document).ready(function() {
  var domThis = $(&#39;#dialog&#39;)[0];
  var wh = $(window).height() / 2;
  $("body").css({
    "background-image": "url(about:blank)",
    "background-attachment": "fixed"
  });
  domThis.style.setExpression(&#39;top&#39;, &#39;eval((document.documentElement).scrollTop + &#39; + wh + &#39;) + "px"&#39;);
});
</script>
<![endif]-->

Vergessen Sie nicht, hier die JQuery-Datei einzuführen.

Verwandte Empfehlungen:

JS-Codebeispiel zur Implementierung des Maskeneffekts, wenn die Maus auf dem Bild platziert wird

So verhindern Sie das Maskenebene vor der Verwendung Beispiel für Seitenscrollen

Was ist eine js-Spezialeffektmaskenebene

Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung einer jQuery-Implementierung einer Maskierungsfunktion, die mit IE6 kompatibel ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!