function previewImage(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { var img = document.createElement("img"); img.src = e.target.result; img.alt = "照片"; img.onclick = showPopup; input.parentNode.appendChild(img); input.style.display = "none"; // 隐藏原始的input元素 } reader.readAsDataURL(input.files[0]); } } function showPopup() { var popup = document.getElementById("popup"); var popupImg = document.getElementById("popupImg"); var scale = 1; // 设置弹出窗口中的图片 popupImg.src = this.src; popupImg.style.transform = scale(${scale}); // 显示弹出窗口 popup.style.display = "block"; // 添加点击事件监听器，点击其他区域时隐藏弹出窗口 popup.onclick = function () { popup.style.display = "none"; }; // 添加滚轮事件监听器，实现缩放功能 popup.onwheel = function (event) { event.preventDefault(); scale += event.deltaY * -0.01; scale = Math.max(0.5, scale); // 设置最小缩放比例 scale = Math.min(3, scale); // 设置最大缩放比例 popupImg.style.transform = scale(${scale}); };当我页面底部滚动条在最右边时，点击图片放大后需要图片出现在当前位置屏幕中间

要实现点击图片放大后图片出现在当前位置屏幕中间，您可以尝试以下步骤：

1. 在`showPopup`函数中，记录当前页面滚动条位置和窗口的可视区域高度。
2. 设置弹出窗口的位置，使其出现在当前位置屏幕中间。
3. 在滚轮事件监听器中，调整图片的缩放并保持其居中位置。

以下是修改后的示例代码：

function showPopup() {
  var popup = document.getElementById("popup");
  var popupImg = document.getElementById("popupImg");
  var scale = 1;

  // 记录当前页面滚动条的位置和窗口的可视区域高度
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var windowHeight = window.innerHeight || document.documentElement.clientHeight;

  // 设置弹出窗口中的图片
  popupImg.src = this.src;
  popupImg.style.transform = `scale(${scale})`;

  // 显示弹出窗口
  popup.style.display = "block";

  // 设置弹出窗口的位置，使其居中显示
  var popupTop = scrollTop + (windowHeight - popupImg.offsetHeight) / 2;
  popup.style.top = popupTop + "px";

  // 添加点击事件监听器，点击其他区域时隐藏弹出窗口
  popup.onclick = function () {
    popup.style.display = "none";
  };

  // 添加滚轮事件监听器，实现缩放功能并保持居中位置
  popup.onwheel = function (event) {
    event.preventDefault();
    scale += event.deltaY * -0.01;
    scale = Math.max(0.5, scale); // 设置最小缩放比例
    scale = Math.min(3, scale); // 设置最大缩放比例
    popupImg.style.transform = `scale(${scale})`;

    // 调整图片位置，保持居中
    var newPopupTop = scrollTop + (windowHeight - popupImg.offsetHeight * scale) / 2;
    popup.style.top = newPopupTop + "px";
  };
}

这样，当您点击图片放大后，弹出窗口会出现在当前位置屏幕中间，并且在滚轮缩放时保持图片的居中位置。

希望对您有所帮助！如果您有任何其他问题，请随时提问。