js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动

下面我将详细讲解如何使用JavaScript实现遮罩层登录框和对联广告，并使其自动跟随滚动条滚动的完整攻略。

下面我将详细讲解如何使用JavaScript实现遮罩层登录框和对联广告，并使其自动跟随滚动条滚动的完整攻略。

实现遮罩层登录框

制作遮罩层

制作遮罩层可以通过CSS中的 position 和 z-index 来实现，具体步骤如下：

1.将整个页面包含在一个父容器内，然后设置父容器为相对定位 position: relative。

.parent-container {
  position: relative;
}

2.使用伪元素 ::before 或 ::after 对父容器进行覆盖，并设置其背景为半透明蒙层。

.parent-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

这里通过 content: "" 来生成一个匿名内容，然后通过 position: absolute 来使其与父容器重叠，借助 background-color 属性设置其背景颜色为半透明。

3.对登录框进行定位，并将其 z-index 设置为较高的值，使其显示在遮罩层之上。

.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

这里使用 position: absolute 将登录框定位在遮罩层内，并通过 top: 50%; left: 50%; transform: translate(-50%, -50%) 实现了水平/垂直居中定位。

实现JavaScript功能

1.监听登录按钮的点击事件，并在点击时显示登录框。

const loginBtn = document.querySelector("#login-btn");
const loginBox = document.querySelector(".login-box");
loginBtn.addEventListener("click", function () {
  loginBox.style.display = "block";
});

这里通过 querySelector 方法分别获取登录按钮和登录框，然后在登录按钮的点击事件中将登录框的 display 样式设置为 block，从而使其显示出来。

2.监听遮罩层的点击事件，并在点击时隐藏登录框。

const mask = document.querySelector(".parent-container::before");
mask.addEventListener("click", function () {
  loginBox.style.display = "none";
});

这里通过 querySelector 方法获取遮罩层，然后在遮罩层的点击事件中将登录框的 display 样式设置为 none，从而使其隐藏起来。

实现对联广告跟随滚动

制作对联广告

对联广告是一种特殊的广告形式，指在页面两侧悬挂的一种广告形式。制作对联广告可以通过CSS中的 position 和 z-index 来实现，具体步骤如下：

1.将整个页面包含在一个父容器内，然后设置父容器为相对定位 position: relative。

.parent-container {
  position: relative;
}

2.分别使用绝对定位 position: absolute 对左右两侧的广告进行定位，并设置其 z-index 为一个较高的数值。

.left-ad, .right-ad {
  position: absolute;
  top: 0;
  width: 200px;
  height: 200px;
  z-index: 10;
}
.left-ad {
  left: 0;
  background-color: #f00;
}
.right-ad {
  right: 0;
  background-color: #0f0;
}

注意，这里需要给广告设置一个相同的宽度和高度。

实现JavaScript功能

1.监听滚动条的滚动事件，并计算页面的滚动距离。

window.addEventListener("scroll", function () {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
});

这里通过 scrollTop 属性获取页面的滚动距离，注意这里需要考虑各种浏览器的兼容性。

2.通过计算滚动距离，设置对联广告的位置。

const leftAd = document.querySelector(".left-ad");
const rightAd = document.querySelector(".right-ad");
window.addEventListener("scroll", function () {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  leftAd.style.top = scrollTop + "px";
  rightAd.style.top = scrollTop + "px";
});

这里通过 querySelector 方法获取左右两侧的广告，然后在滚动事件中将其 top 样式设置为滚动距离 scrollTop，从而实现对联广告的自动跟随滚动条滚动。

至此，JS写出遮罩层登录框和对联广告并自动跟随滚动条滚动的完整攻略就结束了。以上是两个示例说明，您可以根据自己的需求进行修改、拓展。如果还有不清楚的地方，可以继续跟我交流。