根据你的方法修改后仍然在点击添加图片时悬浮窗就出现了
时间: 2024-04-16 14:25:38 浏览: 144
js实现悬浮窗效果(支持拖动)
非常抱歉给您带来困扰。我理解您希望在点击添加图片时不显示悬浮窗,只有在点击放大图片时才显示悬浮窗。在这种情况下,我们可以通过添加一个状态变量来控制悬浮窗的显示。
下面是修改后的代码示例:
```javascript
var isPopupVisible = false; // 悬浮窗显示状态
function showPopup(src) {
if (isPopupVisible) {
return; // 如果悬浮窗已经显示,则直接返回
}
isPopupVisible = true; // 标记悬浮窗为显示状态
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.width = "75%"; // 设置悬浮窗宽度为页面宽度的75%
popup.style.height = "75%"; // 设置悬浮窗高度为页面高度的75%
var img = document.createElement("img");
img.src = src;
img.alt = "放大照片";
img.style.maxWidth = "100%";
img.style.maxHeight = "100%";
var scale = 1; // 初始缩放比例
var scaleFactor = 0.1; // 每次滚动的缩放因子
// 鼠标滚轮事件
img.onwheel = function (e) {
e.preventDefault(); // 阻止默认滚轮行为处理页面滚动
scale += e.deltaY > 0 ? -scaleFactor : scaleFactor; // 根据滚轮滚动方向确定缩放比例
scale = Math.max(scale, 0.1); // 最小缩放比例为0.1
img.style.transform = `scale(${scale})`;
};
// 关闭悬浮窗
popup.onclick = function () {
document.body.removeChild(popup);
isPopupVisible = false; // 标记悬浮窗为隐藏状态
};
popup.appendChild(img);
document.body.appendChild(popup);
}
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]);
}
}
```
在上述修改后的代码中,我们添加了一个名为`isPopupVisible`的状态变量来跟踪悬浮窗的显示状态。在`showPopup`函数中,我们首先检查`isPopupVisible`的值,如果为`true`,说明悬浮窗已经显示,直接返回,不再创建新的悬浮窗。
这样,当您点击添加图片时,不会显示悬浮窗;而在点击已添加的图片时,只有在悬浮窗未显示时才会创建和显示悬浮窗。
非常抱歉之前的修改没有解决问题,希望这次修改能够满足您的需求!如有任何进一步的问题,请随时告诉我。
阅读全文