Implementierungsmethode für die jQuery-Maskenebene

Dieser Artikel stellt hauptsächlich Beispiele für jQuery-Maskenebenen im Detail vor, die einen gewissen Referenzwert haben. Ich hoffe, dass sie jedem helfen können

1.1 Hintergrundtransparenz Der Maskenebenenstil

erfordert einen schwarzen (oder anderen) Hintergrund und muss auf absolute Positionierung eingestellt sein. Der folgende CSS-Stil wird im Projekt verwendet:

/* 半透明的遮罩层 */
#overlay {
  background: #000;
  filter: alpha(opacity=50); /* IE的透明度 */
  opacity: 0.5; /* 透明度 */
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 100; /* 此处的图层要大于页面 */
  display:none;
}

1.2 jQuery-Implementierung der Maske

/* 显示遮罩层 */
function showOverlay() {
  $("#overlay").height(pageHeight());
  $("#overlay").width(pageWidth());

  // fadeTo第一个参数为速度，第二个为透明度
  // 多重方式控制透明度，保证兼容性，但也带来修改麻烦的问题
  $("#overlay").fadeTo(200, 0.5);
}

/* 隐藏覆盖层 */
function hideOverlay() {
  $("#overlay").fadeOut(200);
}

/* 当前页面高度 */
function pageHeight() {
  return document.body.scrollHeight;
}

/* 当前页面宽度 */
function pageWidth() {
  return document.body.scrollWidth;
}

1.3 Eingabeaufforderungsfeld

Der Zweck von Die Maske soll es unmöglich machen, den Inhalt zu bedienen und das Eingabeaufforderungsfeld hervorzuheben. Der Z-Index kann höher als die Maskenebene sein. Die Hauptfrage ist, wie man steuert, dass das Eingabeaufforderungsfeld im Browser zentriert wird.

/* 定位到页面中心 */
function adjust(id) {
  var w = $(id).width();
  var h = $(id).height();
  
  var t = scrollY() + (windowHeight()/2) - (h/2);
  if(t < 0) t = 0;
  
  var l = scrollX() + (windowWidth()/2) - (w/2);
  if(l < 0) l = 0;
  
  $(id).css({left: l+&#39;px&#39;, top: t+&#39;px&#39;});
}

//浏览器视口的高度
function windowHeight() {
  var de = document.documentElement;

  return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
}

//浏览器视口的宽度
function windowWidth() {
  var de = document.documentElement;

  return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth
}

/* 浏览器垂直滚动位置 */
function scrollY() {
  var de = document.documentElement;

  return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}

/* 浏览器水平滚动位置 */
function scrollX() {
  var de = document.documentElement;

  return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
}

Verwandte Empfehlungen:

Beispiel für die jQuery-Funktion zum automatischen Einblenden der Maskenebene beim Öffnen einer Webseite oder beim Klicken zum Einblenden Erhöhen Sie die Maskenebene

Beispiel, wie Sie verhindern können, dass die Seite nach der Maskenebene scrollt

Was ist eine js-Spezialeffektmaskenebene

Das obige ist der detaillierte Inhalt vonImplementierungsmethode für die jQuery-Maskenebene. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!