js实现点击图片在屏幕中间弹出放大效果

要实现点击图片在屏幕中间弹出放大效果，可以采用以下步骤：

1. 给图片设置点击事件监听

首先需要在html文件中给图片标签设置点击事件监听，代码如下：

<img src="path/to/image.jpg" onclick="showImage(this)">

在上述代码中，showImage(this)是一个函数，其中的this代表被点击的图片标签自己。

2. 创建放大图片的容器

我们需要在屏幕中央创建一个容器，用于承载放大后的图片，并将其隐藏。代码如下：

<div id="image-popup">
  <img id="image-popup-content" src="">
</div>

<style>
#image-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  display: none;
}

#image-popup-content {
  max-width: 90%;
  max-height: 90%;
}
</style>

在上述代码中，我们创建了一个id为image-popup的div容器，用于承载放大后的图片。这个容器被设置了position: fixed;，可以使其始终位于屏幕中央，并且被设置了display: none;，初始状态下是隐藏的。

3. 编写弹出放大图片的函数

接下来我们需要编写showImage函数，将被点击图片的路径设置为image-popup-content元素的src属性，并将image-popup容器显示出来。

function showImage(img) {
  // 将被点击的图片设置为弹出图片容器的内容
  document.getElementById("image-popup-content").src = img.src;
  // 显示弹出图片的容器
  document.getElementById("image-popup").style.display = "block";
}

在这个函数中，我们首先获取弹出图片的元素image-popup-content，将其src属性设置为被点击图片的路径。然后获取弹出图片容器image-popup，将其display属性设置为block，以显示出来。

4. 编写关闭弹出放大图片的函数

为了让用户能够关闭弹出图片，我们还需要编写一个函数来处理关闭弹出图片的行为。这个函数的思路就是将image-popup容器隐藏起来。代码如下：

function closeImage() {
  // 隐藏弹出图片的容器
  document.getElementById("image-popup").style.display = "none";
}

示例说明

示例1：放大不同图片

可以通过绑定多个图片的点击事件，并利用this来获取到不同的图片路径，从而实现点击不同图片进行放大的效果。代码如下：

<img src="path/to/image1.jpg" onclick="showImage(this)">
<img src="path/to/image2.jpg" onclick="showImage(this)">

示例2：放大多张图片

也可以利用循环绑定多个图片的点击事件，从而实现点击任意一张图片都可以进行放大的效果。代码如下：

<img src="path/to/image1.jpg" class="popup-image">
<img src="path/to/image2.jpg" class="popup-image">
<img src="path/to/image3.jpg" class="popup-image">

<script>
var images = document.getElementsByClassName("popup-image");
for (var i = 0; i < images.length; i++) {
  images[i].onclick = function() {
    showImage(this);
  }
}
</script>

在上述代码中，我们首先给所有图片设置了相同的class名称popup-image，然后通过getElementsByClassName函数获取到这些图片，利用for循环绑定每张图片的点击事件，并调用showImage函数来实现图片的放大效果。