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; // 计算图片的垂直居中位置 var windowHeight = window.innerHeight || document.documentElement.clientHeight; var popupImgHeight = popupImg.offsetHeight; var topOffset = (windowHeight - popupImgHeight) / 2 // 设置弹出窗口中的图片 popupImg.src = this.src; popupImg.style.transform = scale(${scale}); // 设置弹出窗口中的图片位置 popupImg.style.top = topOffset + "px"; // 显示弹出窗口 popup.style.display = "block"; // 添加点击事件监听器,点击其他区域时隐藏弹出窗口 popup.onclick = function () { popup.style.display = "none"; };我需要将图片插入后点击放大时以弹窗的形式展现,且能通过鼠标拖动查看图片不同位置
时间: 2024-04-11 16:27:10 浏览: 21
你可以使用以下的代码来实现图片放大弹窗并能够通过鼠标拖动查看不同位置的功能:
```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 = 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;
var originalWidth = this.width;
var originalHeight = this.height;
var maxScale = 3; // 图片最大放大倍数
var minScale = 1; // 图片最小缩小倍数
// 计算图片的垂直居中位置
var windowHeight = window.innerHeight || document.documentElement.clientHeight;
var popupImgHeight = popupImg.offsetHeight;
var topOffset = (windowHeight - popupImgHeight) / 2;
// 设置弹出窗口中的图片
popupImg.src = this.src;
popupImg.style.transform = `scale(${scale})`;
popupImg.style.top = topOffset + "px";
// 显示弹出窗口
popup.style.display = "block";
// 鼠标拖动图片查看不同位置
var isDragging = false;
var startX, startY, startTop, startLeft;
popupImg.onmousedown = function(e) {
isDragging = true;
startX = e.clientX;
startY = e.clientY;
startTop = parseInt(popupImg.style.top);
startLeft = parseInt(popupImg.style.left);
};
popupImg.onmousemove = function(e) {
if (isDragging) {
var offsetX = e.clientX - startX;
var offsetY = e.clientY - startY;
var newTop = startTop + offsetY;
var newLeft = startLeft + offsetX;
popupImg.style.top = newTop + 'px';
popupImg.style.left = newLeft + 'px';
}
};
popupImg.onmouseup = function(e) {
isDragging = false;
};
// 添加点击事件监听器,点击其他区域时隐藏弹出窗口
popup.onclick = function () {
popup.style.display = "none";
};
}
```
请确保在页面中添加一个具有id为"popup"的弹出窗口容器和具有id为"popupImg"的图片容器,以便代码能够正确运行。你可以根据需要自定义弹出窗口的样式。