Exemple de partage d'implémentation jQuery de la fonction de masquage compatible avec IE6-js tutoriel-php.cn

Exemple de partage d'implémentation jQuery de la fonction de masquage compatible avec IE6

小云云

Libérer： 2017-12-27 16:37:45

original

1580 Les gens l'ont consulté

Cet article présente principalement la fonction de masque de jQuery qui est compatible avec IE6 et analyse en détail les techniques de mise en page, de style et de fonction de la couche de masque jQuery. Les amis qui en ont besoin pourront s'y référer. .

L'effet de calque de masque jQuery le plus simple et le plus puissant.

Lorsque le navigateur change de taille, la taille du calque de masque changera en conséquence.

La boîte de dialogue au-dessus du calque de masque peut changer à mesure que le défilement change, c'est-à-dire que la boîte de dialogue est affichée au centre du navigateur.

Code HTML

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

Copier après la connexion

Code CSS

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;
}

Copier après la connexion

code jquery

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

Copier après la connexion

N'oubliez pas d'introduire le fichier jquery ici.

Recommandations associées :

Exemple de code JS pour implémenter l'effet de masque lors du placement de la souris sur l'image

Comment empêcher le masque calque d'utilisation Exemple de défilement de page

Qu'est-ce qu'un calque de masque à effet spécial js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!