现在这个脚本运行后有问题:有时候在同一个label上快速移动鼠标后 fixedImgContainer 里会出现相同的重复的图片;还有就是fixedImgContainer 应该是和对应 ToolTip 一样的按照500和200的延时来消失删除的;再就是有fixedImgContainer 的话tooltip里应该是 tooltipstyleleft = mouseX + 10 + px;
下面是修改后的脚本,修复了出现重复图片的问题,添加了对 fixedImgContainer 的删除和对应 ToolTip 的消失延时的处理,同时也更新了 tooltip 的位置计算:
let selectedLabel = null;
let currentTooltip = null;
let tooltipTimer = null;
let fixedImgContainer = null;
labels.forEach((label) => {
label.addEventListener("mouseover", (e) => {
if (currentTooltip) {
document.querySelector(".category-options-wrapper").removeChild(currentTooltip);
clearTimeout(tooltipTimer);
}
const tooltip = document.createElement("div");
tooltip.classList.add("tooltip");
tooltip.innerHTML = label.getAttribute("data-title");
const imgSrc = label.getAttribute("data-img");
if (imgSrc) {
const img = new Image();
img.src = imgSrc;
img.onload = function () {
// If image width or height is greater than 150px, show it in fixed position
if (img.width > 150 || img.height > 150) {
if (!fixedImgContainer) {
fixedImgContainer = document.createElement("div");
fixedImgContainer.classList.add("fixed-img-container");
document.body.appendChild(fixedImgContainer);
}
const fixedImg = new Image();
fixedImg.src = imgSrc;
fixedImgContainer.innerHTML = '';
fixedImgContainer.appendChild(fixedImg);
} else {
tooltip.appendChild(document.createElement("br"));
tooltip.appendChild(img);
}
}
img.onerror = function () {
console.log("Error: Failed to load image '" + imgSrc + "'");
};
}
tooltip.style.maxWidth = "300px";
document.querySelector(".category-options-wrapper").appendChild(tooltip);
const tooltipWidth = tooltip.offsetWidth;
const tooltipHeight = tooltip.offsetHeight;
const mouseX = e.clientX;
const mouseY = e.clientY;
const wrapperRect = document.querySelector(".category-options-wrapper").getBoundingClientRect();
let left = mouseX - wrapperRect.left + 10;
let top = mouseY - wrapperRect.top + 10;
if (!imgSrc) {
left = e.pageX + 10;
top = e.pageY + 10;
} else if (left + tooltipWidth > wrapperRect.left + wrapperRect.width) {
// tooltip 超出右侧边界
left = wrapperRect.left + wrapperRect.width - tooltipWidth;
}
if (top + tooltipHeight > wrapperRect.top + wrapperRect.height) {
// tooltip 超出下方边界
top = wrapperRect.top + wrapperRect.height - tooltipHeight;
}
tooltip.style.left = left + "px";
tooltip.style.top = top + "px";
tooltip.addEventListener("mousemove", () => {
clearTimeout(tooltipTimer);
});
tooltip.addEventListener("mouseout", () => {
tooltipTimer = setTimeout(() => {
document.querySelector(".category-options-wrapper").removeChild(tooltip);
currentTooltip = null;
// 如果该 label 元素是当前选中的元素,则不还原其背景颜色
if (label == selectedLabel) {
label.style.backgroundColor = "";
}
}, 500);
// Remove fixed image container if it exists
if (fixedImgContainer) {
fixedImgContainer.innerHTML = '';
document.body.removeChild(fixedImgContainer);
fixedImgContainer = null;
}
});
currentTooltip = tooltip;
// 如果当前已有选中的 label 元素,则将其背景颜色还原
if (selectedLabel && label !== selectedLabel) {
selectedLabel.style.backgroundColor = "";
}
// 将当前 label 元素设置为选中,并将其背景颜色设置为 '#40b40d'
selectedLabel = label;
selectedLabel.style.backgroundColor = "rgba(64, 180, 13, 0.6)";
});
label.addEventListener("mouseleave", () => {
if (currentTooltip) {
tooltipTimer = setTimeout(() => {
document.querySelector(".category-options-wrapper").removeChild(currentTooltip);
currentTooltip = null;
// 如果该 label 元素是当前选中的元素,则不还原其背景颜色
if (label == selectedLabel) {
label.style.backgroundColor = "";
}
}, 200);
// Remove fixed image container if it exists
if (fixedImgContainer) {
fixedImgContainer.innerHTML = '';
document.body.removeChild(fixedImgContainer);
fixedImgContainer = null;
}
}
});
});
``
原文地址: https://www.cveoy.top/t/topic/fr5W 著作权归作者所有。请勿转载和采集!