JavaScript编写点击查看大图的页面半透明遮罩层效果实例

下面我将为您详细讲解 "JavaScript编写点击查看大图的页面半透明遮罩层效果实例" 的完整攻略。

1. 确定遮罩层的基本样式

首先，我们需要确定遮罩层的样式，在遮罩层上添加半透明的背景，以及相对定位使其覆盖整个页面。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none; /*默认隐藏*/
}

2. 给点击事件添加遮罩层显示效果

其次，我们需要编写JavaScript代码来实现点击事件触发遮罩层的显示，以及显示对应的大图。

const overlay = document.querySelector('.overlay');
const imgLinks = document.querySelectorAll('.img-link');
const imgContainer = document.querySelector('.img-container');
const largeImg = document.querySelector('.large-img');

imgLinks.forEach(imgLink => {
  imgLink.addEventListener('click', e => {
    e.preventDefault(); // 阻止默认行为，避免打开链接
    const imgUrl = imgLink.href;
    largeImg.src = imgUrl;
    overlay.style.display = 'block';
    imgContainer.style.display = 'block';
  });
});

overlay.addEventListener('click', e => {
  if (e.target === overlay) {
    overlay.style.display = 'none';
    imgContainer.style.display = 'none';
  }
});

代码解释：

• const overlay = document.querySelector('.overlay');：获取遮罩层元素
• const imgLinks = document.querySelectorAll('.img-link');：获取所有包含大图的链接
• const imgContainer = document.querySelector('.img-container');：获取展示大图的容器
• const largeImg = document.querySelector('.large-img');：获取用于展示大图的<img>元素
• e.preventDefault();：阻止点击链接后默认打开链接
• largeImg.src = imgUrl;：将大图链接赋值给<img>元素的src属性
• overlay.style.display = 'block'; 和 imgContainer.style.display = 'block';：显示遮罩层和展示大图的容器
• if (e.target === overlay)：当点击遮罩层的区域时，隐藏遮罩层以及容器。

示例说明

示例一

假设我们有如下 HTML 结构：

<div class="gallery">
  <a href="image1.jpg" class="img-link"><img src="image1-small.jpg" alt="小图1"></a>
  <a href="image2.jpg" class="img-link"><img src="image2-small.jpg" alt="小图2"></a>
  <a href="image3.jpg" class="img-link"><img src="image3-small.jpg" alt="小图3"></a>
</div>

<div class="overlay">
  <div class="img-container">
    <img class="large-img" src="" alt="大图">
  </div>
</div>

我们通过 querySelectorAll 获取所有 img-link 元素和大图容器和大图元素，然后遍历每个 img-link 元素添加点击事件，当点击时做如下处理：

imgLinks.forEach(imgLink => {
  imgLink.addEventListener('click', e => {
    e.preventDefault(); // 阻止默认行为，避免打开链接
    const imgUrl = imgLink.href;
    largeImg.src = imgUrl;
    overlay.style.display = 'block';
    imgContainer.style.display = 'block';
  });
});

这里我们获取了当前点击元素的 href 属性，然后将其设置为大图元素的 src 属性，修改遮罩层和大图容器的样式实现显示。

示例二

再来看一个实际的例子，假设我们的网站页面上有一些图片需要点击查看大图，但我们希望在加载大图时添加一个旋转图标以提示用户正在加载。我们可以通过添加一个 HTML 元素来实现这个效果。

我们修改下 HTML 结构：

<div class="gallery">
  <a href="image1.jpg" class="img-link" data-large-img="image1-large.jpg"><img src="image1-small.jpg" alt="小图1"></a>
  <a href="image2.jpg" class="img-link" data-large-img="image2-large.jpg"><img src="image2-small.jpg" alt="小图2"></a>
  <a href="image3.jpg" class="img-link" data-large-img="image3-large.jpg"><img src="image3-small.jpg" alt="小图3"></a>
</div>

<div class="overlay">
  <div class="loading"></div>
  <div class="img-container">
    <img class="large-img" src="" alt="大图">
  </div>
</div>

• 我们在每个 img-link 元素添加了自定义属性 data-large-img，用来存储大图的链接。
• 添加了一个 loading 元素，用来展示加载大图时的旋转图标。

然后我们对 JavaScript 代码进行修改：

const overlay = document.querySelector('.overlay');
const imgLinks = document.querySelectorAll('.img-link');
const imgContainer = document.querySelector('.img-container');
const largeImg = document.querySelector('.large-img');
const loading = document.querySelector('.loading');

imgLinks.forEach(imgLink => {
  imgLink.addEventListener('click', e => {
    e.preventDefault(); // 阻止默认行为，避免打开链接
    const imgUrl = imgLink.dataset.largeImg;
    largeImg.src = '';
    loading.style.display = 'block';
    overlay.style.display = 'block';
    imgContainer.style.display = 'block';
    const img = new Image();
    img.src = imgUrl;
    img.onload = () => {
      largeImg.src = imgUrl;
      loading.style.display = 'none';
      imgContainer.style.display = 'block';
    };
  });
});

overlay.addEventListener('click', e => {
  if (e.target === overlay) {
    overlay.style.display = 'none';
    imgContainer.style.display = 'none';
  }
});

修改后我们将大图的链接从 img-link 元素的 href 属性转移到了自定义属性 data-large-img 中，而将 href 用于阻止默认打开链接的行为。为了实现展示加载大图时的旋转图标，我们在遮罩层中添加了 loading 元素，当用户点击展示大图的链接时，我们将 loading 显示，并且将大图容器的 display 属性设置为 none 隐藏，等待大图加载完成。完成后我们将隐藏 loading，显示大图容器并展示大图。

结论

通过以上代码示例分析，我们可以得知如何通过JavaScript编写点击查看大图的页面半透明遮罩层效果实例。通过掌握下述技巧，你可以更好地实现页面效果。

• 确定遮罩层样式
• 给点击事件添加遮罩层显示效果