返回

原生JS实现在网页中，图片点击即可加载原图并显示

前端

原生 JavaScript 是一种强大的工具，它可以用来构建各种各样的交互式网页。其中，图片查看器是一个很常见的应用场景。

原生 JavaScript 实现的图片查看器通常需要记录页面中图片所在的位置，创建div层铺满整个屏幕，在点击图片时加载大图并显示在div层中。

除了基本的功能之外，原生 JavaScript 实现的图片查看器还可以添加一些附加的功能，如放大镜、旋转、注释等。

为什么要使用原生 JavaScript 实现图片查看器？

原生 JavaScript 实现的图片查看器有以下几个优点：

  • 无需依赖第三方库：原生 JavaScript 实现的图片查看器不需要依赖任何第三方库，因此可以减小网页的体积。
  • 性能更好：原生 JavaScript 实现的图片查看器通常性能更好，因为它不需要加载额外的库。
  • 更容易定制：原生 JavaScript 实现的图片查看器更容易定制，因为它可以根据需要调整代码。

如何使用原生 JavaScript 实现图片查看器？

要使用原生 JavaScript 实现图片查看器，首先需要记录页面中图片所在的位置。这可以通过使用 offsetTop、offsetLeft、width 和 height 等属性来实现。

var images = document.querySelectorAll('img');
for (var i = 0; i < images.length; i++) {
  var image = images[i];
  image.offsetTop = image.getBoundingClientRect().top;
  image.offsetLeft = image.getBoundingClientRect().left;
  image.width = image.offsetWidth;
  image.height = image.offsetHeight;
}

接下来，需要创建一个div层铺满整个屏幕。这个div层可以通过使用 createElement() 方法来创建。

var div = document.createElement('div');
div.style.position = 'fixed';
div.style.top = '0';
div.style.left = '0';
div.style.width = '100%';
div.style.height = '100%';
div.style.backgroundColor = 'black';
div.style.opacity = '0.8';

在点击图片时，需要加载大图并显示在div层中。这可以通过使用 XMLHttpRequest 对象来实现。

image.addEventListener('click', function() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', image.src, true);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    if (this.status == 200) {
      var blob = this.response;
      var imageUrl = URL.createObjectURL(blob);
      var img = document.createElement('img');
      img.src = imageUrl;
      img.style.position = 'absolute';
      img.style.top = image.offsetTop + 'px';
      img.style.left = image.offsetLeft + 'px';
      img.style.width = image.width + 'px';
      img.style.height = image.height + 'px';
      div.appendChild(img);
    }
  };
  xhr.send();
});

最后，在点击div层时，需要关闭图片查看器。这可以通过使用 remove() 方法来实现。

div.addEventListener('click', function() {
  div.remove();
});

结语

原生 JavaScript 实现的图片查看器是一种功能强大且易于使用的工具。它可以用来构建各种各样的图片查看器应用。

本指南介绍了如何使用原生 JavaScript 实现图片查看器。如果你有兴趣了解更多关于原生 JavaScript 的知识，可以参考以下资源：