我正在制作帶有擴展標簽的甜甜圈圈 svg。截至昨晚，擴展選項卡功能齊全，并且在 mouseenter/mouseleave 上應用了正確的 x/y 變換。（x/y 在滑鼠進入和滑鼠離開時對于正確的變換原點都是必不可少的 - 這很難讓每個選項卡擴展都顯示為中心，因為它是一個圓圈）。
今天，我嘗試通過創建一個附加回圈來進一步處理該專案，該回圈根據活動選項卡索引顯示相應的內容。（這是有效的）。
現在我想更進一步，讓當前選項卡保持展開狀態，直到另一個選項卡懸停在上面。現在，當我的滑鼠離開選項卡時（顯然），事件監聽器 mouseleave 應用。除非將滑鼠懸停在另一個選項卡上，否則我該怎么做才能保持當前選項卡“活動”？（而不是mouseleave？）。我對 JS 還很缺乏經驗，如果有人能把我送到正確的方向，我會很滿足
代碼筆
const subTabs = gsap.utils.toArray(".subtab");
const expandTabs = gsap.utils.toArray(".expandtab");
// Timeline set default duration to .025
const tl = gsap.timeline({ defaults: { duration: 0.025 } });
tl.set(expandTabs, {
opacity: 0,
scale: 0.5,
x: "0%",
y: "0%",
});
// display corresponding content based on active tab
// Set expand tab x/y when inactive
let tabIndex = 1;
tabExcerpt(tabIndex);
function currentTab(n) {
tabExcerpt(tabIndex = n);
}
function tabExcerpt(n) {
let i;
let expandTab = document.querySelectorAll(".expandtab");
let tabExcerpts = document.querySelectorAll(".tab-excerpt");
if (n > tabExcerpts.length) {tabIndex = 1}
if (n < 1) {tabIndex = tabExcerpts.length}
for (i = 0; i < tabExcerpts.length; i ) {
tabExcerpts[i].style.display = "none";
}
for (i = 0; i < expandTab.length; i ) {
// Need to set expand tab to default x/y when not active
expandTab[i] = (num) => {
tl.set(expandTab, {
scale: 0.5,
opacity: 0,
x: "25%",
y: "25%",
});
}
}
tabExcerpts[tabIndex-1].style.display = "block";
// expandTab[tabIndex-1].className.baseVal = " active";
}
subTabs.forEach((subTab, index) => {
let expandTab = expandTabs[index];
// Event Listener Hover On
// If index[0]
if (index === 0) {
subTabs[0].addEventListener("mouseenter", (event) => {
console.log("you entered region number " index);
tl.fromTo(
expandTab,
{
scale: 0.5,
opacity: 0,
x: "30%",
y: "25%",
},
{
scale: 1,
opacity: 1,
x: "0%",
y: "0%",
}
);
});
} else if (index === 1) {
subTabs[1].addEventListener("mouseenter", (event) => {
console.log("you entered region number " index);
tl.fromTo(
expandTab,
{
scale: 0.5,
opacity: 0,
x: "24%",
y: "39%",
},
{
scale: 1,
opacity: 1,
x: "0%",
y: "0%",
}
);
});
} else if (index === 2) {
subTabs[2].addEventListener("mouseenter", (event) => {
console.log("you entered region number " index);
tl.fromTo(
expandTab,
{
scale: 0.5,
opacity: 0,
x: "25%",
y: "25%",
},
{
scale: 1,
opacity: 1,
x: "0%",
y: "0%",
}
);
});
} else if (index === 3) {
subTabs[3].addEventListener("mouseenter", (event) => {
console.log("you entered region number " index);
tl.fromTo(
expandTab,
{
scale: 0.5,
opacity: 0,
x: "25%",
y: "25%",
},
{
scale: 1,
opacity: 1,
x: "0%",
y: "0%",
}
);
});
} else if (index === 4) {
subTabs[4].addEventListener("mouseenter", (event) => {
console.log("you entered region number " index);
tl.fromTo(
expandTab,
{
scale: 0.5,
opacity: 0,
x: "25%",
y: "25%",
},
{
scale: 1,
opacity: 1,
x: "0%",
y: "0%",
}
);
});
}
// Event Listener Hover off
// if index[0]
if (index === 0) {
subTabs[0].addEventListener("mouseleave", (event) => {
console.log("you exited region number " index);
tl.fromTo(
expandTab,
{
scale: 1,
opacity: 1,
x: "0%",
y: "0%",
},
{
scale: 0.5,
opacity: 0,
x: "35%",
y: "25%",
}
);
});
} else if (index === 1) {
subTabs[1].addEventListener("mouseleave", (event) => {
console.log("you exited region number " index);
tl.fromTo(
expandTab,
{
scale: 1,
opacity: 1,
x: "0%",
y: "0%",
},
{
scale: 0.5,
opacity: 0,
x: "24%",
y: "39%",
}
);
});
} else if (index === 2) {
subTabs[2].addEventListener("mouseleave", (event) => {
console.log("you exited region number " index);
tl.fromTo(
expandTab,
{
scale: 1,
opacity: 1,
x: "0%",
y: "0%",
},
{
scale: 0.5,
opacity: 0,
x: "25%",
y: "25%",
}
);
});
} else if (index === 3) {
subTabs[3].addEventListener("mouseleave", (event) => {
console.log("you exited region number " index);
tl.fromTo(
expandTab,
{
scale: 1,
opacity: 1,
x: "0%",
y: "0%",
},
{
scale: 0.5,
opacity: 0,
x: "25%",
y: "25%",
}
);
});
} else if (index === 4) {
subTabs[4].addEventListener("mouseleave", (event) => {
console.log("you exited region number " index);
tl.fromTo(
expandTab,
{
scale: 1,
opacity: 1,
x: "0%",
y: "0%",
},
{
scale: 0.5,
opacity: 0,
x: "25%",
y: "25%",
}
);
});
}
});
uj5u.com熱心網友回復：
mouseout您必須使用“自定義事件”，而不是在此處使用事件。
是的，您可以創建事件...在此處閱讀更多內容并發送它們。這使您可以在不干擾任何其他常規事件的“正常行為”的情況下觸發一些特殊的事情。
下面，我將事件稱為“撤回”。耶！你也可以隨意命名！
這是功能：
function unhover(exceptIndex){
subTabs[exceptIndex].classList.add("expanded")
subTabs.forEach((subTab, index) => {
if(index != exceptIndex && subTab.classList.contains("expanded")){
let event = new Event('retract');
subTab.dispatchEvent(event);
subTab.classList.remove("expanded");
}
})
}
而且您將在每個回呼結束時呼叫它mouseenter，并傳遞當前懸停的索引（因為該索引不應收回）。
unhover(index);
這是您的CodePen 分叉和編輯
順便說一句，很好（而且很快！）關于擴展的作業！繼續做好作業。;)
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/421755.html
標籤：
下一篇：SVG將圓形文本放在一行上