图像和视频灯箱反应 - Javascript

本文将介绍如何使用Javascript创建图像和视频灯箱效果。一个灯箱是一种浮动层，显示图片或视频并使其在主网页上呈现出来。当用户点击一个链接或按钮时，灯箱会打开并显示一个图像或视频，以便用户在不离开当前页面的情况下查看。使用灯箱可增加用户体验，而Javascript的灵活性则使得可以轻松自定义灯箱效果。

初始化HTML代码

在开始编写Javascript代码之前，您需要将HTML与样式初始化。一个典型的HTML结构需要一个 <a> 元素，并分别使用 data-lightbox-type = "image" 和 data-lightbox-type = "video" 来打开图像和视频灯箱。如下所示：

<a href="images/flower.jpg" data-lightbox-type="image">Open Flower Image</a>

<a href="videos/dog.mp4" data-lightbox-type="video">Open Dog Video</a>

编写Javascript代码

下面是必要的Javascript，将处理图像和视频灯箱。

var lightbox = function() {

  var imgLinks = document.querySelectorAll('a[data-lightbox-type=image]'),
    videoLinks = document.querySelectorAll('a[data-lightbox-type=video]'),
    len = imgLinks.length,
    i;

  for (i = 0; i < len; i++) {
    imgLinks[i].addEventListener('click', function(e) {
      e.preventDefault();
      createLightbox(this.href, this.getAttribute('title'));
    });
  }

  len = videoLinks.length;

  for (i = 0; i < len; i++) {
    videoLinks[i].addEventListener('click', function(e) {
      e.preventDefault();
      createLightbox(this.href, this.getAttribute('title'), 'video');
    });
  }

  var createLightbox = function(src, title, media) {
    var lightbox = document.createElement('div'),
      overlay = document.createElement('div'),
      box = document.createElement('div'),
      content = '',
      mediaTag,
      titleTag;

    overlay.classList.add('overlay');
    lightbox.classList.add('lightbox');
    titleTag = (title.length > 0) ? '<h3>' + title + '</h3>' : '';

    if (media === 'video') {
      mediaTag = '<video src="' + src + '" controls></video>'
    } else {
      mediaTag = '<img src="' + src + '">';
    }

    content = '<div class="content">' +
      titleTag +
      mediaTag +
      '</div>';

    box.innerHTML = content;
    lightbox.appendChild(overlay);
    lightbox.appendChild(box);

    document.body.appendChild(lightbox);

    lightbox.addEventListener('click', function() {
      document.body.removeChild(lightbox);
    });
  };
}

lightbox();

上面的Javascript代码使用 querySelectorAll 方法查找所有HTML中带有 data-lightbox-type 属性的元素。接着，对每个元素添加一个事件监听器，以便在点击它时弹出对应的灯箱。在这个例子中，使用 createLightbox 函数来生成灯箱。该函数会使用提供的URL和标题来创建一个包含图像或视频的灯箱。如果您只想显示图像，将第三个参数省略即可。

写一些CSS样式

最后，您需要为灯箱编写一些CSS样式。以下是一些基本样式：

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9998;
}

.lightbox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
  height: auto;
  width: 80%;
  max-width: 800px;
  max-height: 80%;
  overflow: auto;
}

.lightbox .content {
  padding: 30px;
  text-align: center;
}

.lightbox .content h3 {
  margin-top: 0;
}

.lightbox video,
.lightbox img {
  display: block;
  max-height: 80%;
  max-width: 100%;
  margin: 0 auto;
}

该CSS包含一个灰色的半透明遮罩和一个固定在屏幕中央的灯箱。最后，将内容和图像/视频添加到灯箱中。

结论

本文提供了一个用Javascript创建图像和视频灯箱的示例。我们了解到如何使用 querySelectorAll 和 addEventListener 方法查找和添加事件监听器，以便在点击链接或按钮时打开灯箱。然后，我们编写了一个 createLightbox 函数来生成图像和视频灯箱，并在最后添加了一些CSS样式。