Heim > Web-Frontend > js-Tutorial > Hauptteil

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

小云云
Freigeben: 2017-12-27 16:37:45
Original
1562 Leute haben es durchsucht

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>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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]-->
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage