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 = function () { showPopup(img.src); }; // 隐藏原始的input元素 input.style.display = "none"; // 添加图片到input元素的父节点 input.parentNode.appendChild(img); }; reader.readAsDataURL(input.files[0]); } } function showPopup(imageSrc) { var popup = document.createElement("div"); var popupImg = document.createElement("img"); var scale = 1; var isDragging = false; var startX, startY, translateX, translateY;我添加在图片完成后,需要点击图片后能够出现悬浮窗放大图片,而且不管页面在哪个位置,悬浮窗始终在当前页面最新位置的中心
时间: 2024-04-15 15:27:26 浏览: 22
您可以通过以下代码来实现点击图片后出现悬浮窗放大图片的效果,并使悬浮窗始终在当前页面最新位置的中心:
首先,您需要在 showPopup 函数中添加一些代码来创建和设置悬浮窗的样式和位置:
```javascript
function showPopup(imageSrc) {
var popup = document.createElement("div");
var popupImg = document.createElement("img");
var scale = 1;
var isDragging = false;
var startX, startY, translateX, translateY;
// 设置悬浮窗的样式
popup.style.position = "fixed";
popup.style.top = "50%";
popup.style.left = "50%";
popup.style.transform = "translate(-50%, -50%)";
popup.style.backgroundColor = "white";
popup.style.zIndex = "9999";
popup.style.padding = "10px";
popup.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.2)";
// 设置悬浮窗中的图片样式
popupImg.style.maxWidth = "100%";
popupImg.style.maxHeight = "100%";
// 设置悬浮窗中的图片源
popupImg.src = imageSrc;
// 将图片添加到悬浮窗中
popup.appendChild(popupImg);
// 将悬浮窗添加到页面中
document.body.appendChild(popup);
}
```
然后,您需要修改 previewImage 函数中的 img.onclick 方法,以调用 showPopup 函数来显示悬浮窗:
```javascript
img.onclick = function () {
showPopup(img.src);
};
```
这样,当您点击图片时,就会出现一个悬浮窗,其中包含放大后的图片。悬浮窗会始终在当前页面最新位置的中心显示。