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]); } } 我将图片添加到网页表格后,需要点击图片能够以悬浮窗的形式放大图片,且随着网页滑动,悬浮窗始终在当前最新位置的页面中心,当当前图片放大后,点击悬浮窗外位置为关闭悬浮窗,
时间: 2024-04-21 08:22:09 浏览: 48
预览图片功能
您可以使用以下代码来实现点击图片放大并以悬浮窗的形式显示,并且悬浮窗始终在当前最新位置的页面中心:
```javascript
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(src) {
var popup = document.createElement("div");
popup.style.position = "fixed";
popup.style.top = "50%";
popup.style.left = "50%";
popup.style.transform = "translate(-50%, -50%)";
popup.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
popup.style.zIndex = "9999";
popup.style.padding = "20px";
popup.style.textAlign = "center";
var img = document.createElement("img");
img.src = src;
img.alt = "放大照片";
img.style.maxWidth = "90%";
img.style.maxHeight = "90%";
popup.appendChild(img);
// 关闭悬浮窗
popup.onclick = function () {
document.body.removeChild(popup);
};
document.body.appendChild(popup);
}
```
在您的代码中,当点击图片时,会调用`showPopup()`函数来创建并显示悬浮窗。悬浮窗的样式通过设置`popup`元素的CSS属性来实现,其中`position: fixed;`使其固定在屏幕上,`top: 50%; left: 50%; transform: translate(-50%, -50%);`将悬浮窗定位在页面中心。
另外,为了使悬浮窗在滑动页面时始终保持在最新位置的中心,您可以使用CSS的`position: fixed;`来固定悬浮窗的位置。
当点击悬浮窗外的位置时,会触发`popup.onclick`事件,从而移除悬浮窗。
希望对您有帮助!如有任何问题,请随时提问。
阅读全文