首頁猿問 Vanilla...

Vanilla Javascript 中鼠標懸停時的循環函數

JavaScript

躍然一笑 2023-10-20 15:32:56

我正在嘗試創建圖像輪播，并希望當用戶將鼠標懸停在 div 的左側和右側時水平滾動。我為左右控件設置了兩個“不可見”div，并為它們提供了事件監聽器：right.addEventListener("鼠標懸停", goRight)function goRight() { document.getElementById('images').scrollLeft += 20; }left.addEventListener("鼠標懸停", goLeft)function goLeft() { document.getElementById('images').scrollLeft -= 20; }當我將鼠標懸停在它們上方時，它會滾動一次，但我希望它不斷滾動，直到我鼠標移開。當我懸停在控件上時，如何使 goRight()/goLeft() 循環？

查看完整描述

2 回答

RISEBY

TA貢獻1856條經驗獲得超5個贊

一種解決方案是使用setInterval()應該在上取消的方法mouseout。您可以存儲間隔 id 并clearInterval()使用mouseout：

const delay = 100;

let intervalId;

function goLeft() {

intervalId = setInterval(

() => (document.getElementById('images').scrollLeft -= 20),

delay,

);

}

function goRight() {

intervalId = setInterval(

() => (document.getElementById('images').scrollLeft += 20),

delay,

);

}

function stopScrolling() {

clearInterval(intervalId);

}

left.addEventListener('mouseover', goLeft);

left.addEventListener('mouseout', stopScrolling);

right.addEventListener('mouseover', goRight);

right.addEventListener('mouseout', stopScrolling);

反對回復 2023-10-20

jeck貓

TA貢獻1909條經驗獲得超7個贊

您可以創建一個布爾值，當用戶將鼠標懸停在元素上時，該布爾值將為“true”。

// for the right side:

let mouseOverRight = false;

right.addEventListener("mouseenter", function(){

mouseOverRight = true;

});

right.addEventListener("mouseleave", function(){

mouseOverRight = false;

});

然后使用間隔，將延遲更改為您想要的任何速度

window.setInterval(function(){

if (mouseOverRight)

/// Scroll logic here

}, 300);

當然，你也必須對左側做同樣的事情。

反對回復 2023-10-20

2 回答
0 關注
134 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Vanilla Javascript 中鼠標懸停時的循環函數

Vanilla Javascript 中鼠標懸停時的循環函數

2 回答

添加回答