function showPopup(imageSrc) { var popup = document.createElement("div"); var popupImg = document.createElement("img"); var scale = 1; // 设置弹出窗口中的图片 popupImg.src = imageSrc; popupImg.style.transform = `scale(${scale})`; // 设置悬浮窗样式 popup.style.position = "fixed"; popup.style.top = "10%"; popup.style.left = "10%"; popup.style.width = "80%"; popup.style.height = "80%"; popup.style.backgroundColor = "transparent"; popup.style.zIndex = "9999"; // 添加图片到悬浮窗 popup.appendChild(popupImg); document.body.appendChild(popup); // 添加点击事件监听器,点击其他区域时隐藏弹出窗口 popup.onclick = function () { popup.style.display = "none"; }当我点击图片放大后,图片未在当前界面显示完全,我需要在界面滑动后,图片图片弹窗始终保持在当前页面的中间
时间: 2024-04-12 19:31:21 浏览: 141
拍照及图片上传.zip
您可以通过监听`window`对象的`scroll`事件来实现滑动页面时图片弹窗始终保持在当前页面的中间。在`showPopup`函数中添加以下代码:
```javascript
function showPopup(imageSrc) {
// 其他代码...
// 添加滚动事件监听器
window.addEventListener("scroll", centerPopup);
// 居中弹出窗口
function centerPopup() {
var windowHeight = window.innerHeight;
var popupHeight = popup.offsetHeight;
// 计算弹出窗口的垂直偏移量
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var offset = (windowHeight - popupHeight) / 2 + scrollTop;
// 设置弹出窗口的垂直位置
popup.style.top = offset + "px";
}
// 其他代码...
}
```
在上面的代码中,我们定义了一个名为`centerPopup`的函数,它计算弹出窗口的垂直偏移量并设置弹出窗口的垂直位置。然后,我们在`showPopup`函数内部添加了一个滚动事件监听器,当页面滚动时,`centerPopup`函数将被调用以重新定位弹出窗口。
请注意,我们在`showPopup`函数结束后也需要移除滚动事件监听器,以避免内存泄漏。可以在需要移除监听器的地方添加以下代码:
```javascript
// 移除滚动事件监听器
window.removeEventListener("scroll", centerPopup);
```
希望这能帮助到您!如果您有任何其他问题,请随时提问。
阅读全文