javascript 图片查看器_js图片展示：代码示例

JavaScript 图片查看器是一种常见的网页功能，它允许用户在网页上点击图片后，以弹窗或者其他形式展示图片的详细信息和放大效果。下面是一个简单的示例代码，展示了如何使用 JavaScript 实现图片查看器。

我们需要在 HTML 中添加一个图片容器，用于显示用户点击的图片。可以使用 `<div>` 元素作为容器，并设置一个唯一的 ID，以便在 JavaScript 中引用它。

<div id="imageContainer"></div>

接下来，在 JavaScript 中，我们需要为每个图片添加点击事件监听器。当用户点击图片时，会触发相应的事件处理函数。在事件处理函数中，我们可以获取到用户点击的图片的信息，并将其展示在图片容器中。

// 获取所有图片元素
var images = document.getElementsByTagName('img');
// 为每个图片添加点击事件监听器
for (var i = 0; i < images.length; i++) {
  images[i].addEventListener('click', function(event) {
    // 获取用户点击的图片的信息
    var src = event.target.src;
    var alt = event.target.alt;
    // 创建一个新的图片元素，用于展示详细信息和放大效果
    var imageElement = document.createElement('img');
    imageElement.src = src;
    imageElement.alt = alt;
    // 将图片元素添加到图片容器中
    var imageContainer = document.getElementById('imageContainer');
    imageContainer.innerHTML = '';
    imageContainer.appendChild(imageElement);
  });
}

在上面的代码中，我们首先使用 `getElementsByTagName` 方法获取到页面中的所有图片元素，并使用一个循环为每个图片添加点击事件监听器。当用户点击某个图片时，事件处理函数会被触发。在事件处理函数中，我们使用 `event.target` 获取到用户点击的图片元素，然后获取图片的 `src` 和 `alt` 属性。接着，我们创建一个新的图片元素，并将获取到的图片信息赋值给它。我们将新的图片元素添加到图片容器中，并清空容器中的内容（以便替换为新的图片）。

通过上面的代码，我们实现了一个简单的 JavaScript 图片查看器，用户点击图片后，会在图片容器中展示该图片的详细信息和放大效果。