再这个代码中,我点击添加图片按钮时,悬浮窗就已经出现,我需要添加图片完成后,点击图片放大时才出现放大图片的悬浮窗
时间: 2024-04-15 09:28:53 浏览: 101
鼠标悬浮时图片上显示放大图标
要在点击图片放大时才显示放大图片的悬浮窗,您可以将悬浮窗的创建和显示逻辑移动到点击图片事件处理函数中。下面是修改后的代码示例:
```javascript
// 假设有一个按钮,点击该按钮会触发添加图片的操作
var addButton = document.getElementById("addButton");
addButton.onclick = function () {
// 假设有一个函数用于添加图片并返回图片的src
var src = addImage();
// 创建放大图片的悬浮窗
var popup = document.createElement("div");
// 其他样式设置省略...
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);
};
// 鼠标滚轮事件
popup.onwheel = function (e) {
e.preventDefault(); // 阻止默认滚轮行为处理页面滚动
var scale = 1 + e.deltaY * 0.01; // 根据滚轮滚动方向确定缩放比例
img.style.transform = `scale(${scale})`;
};
document.body.appendChild(popup);
};
```
在上述代码中,我们将创建和显示放大图片悬浮窗的逻辑移动到了点击图片事件处理函数中。当点击添加图片按钮后,先执行添加图片的逻辑,然后在回调函数中创建放大图片的悬浮窗,并将其添加到页面中。
这样,只有在点击图片放大时,才会显示放大图片的悬浮窗。
希望这次能满足您的需求!如有任何进一步的问题,请随时提问。
阅读全文