第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會有你想問的

Vanilla Javascript 中鼠標(biāo)懸停時(shí)的循環(huán)函數(shù)

Vanilla Javascript 中鼠標(biāo)懸停時(shí)的循環(huán)函數(shù)

躍然一笑 2023-10-20 15:32:56
我正在嘗試創(chuàng)建圖像輪播，并希望當(dāng)用戶將鼠標(biāo)懸停在 div 的左側(cè)和右側(cè)時(shí)水平滾動。我為左右控件設(shè)置了兩個(gè)“不可見”div，并為它們提供了事件監(jiān)聽器：right.addEventListener("鼠標(biāo)懸停", goRight)function goRight() {     document.getElementById('images').scrollLeft += 20; }left.addEventListener("鼠標(biāo)懸停", goLeft)function goLeft() {    document.getElementById('images').scrollLeft -= 20; }當(dāng)我將鼠標(biāo)懸停在它們上方時(shí)，它會滾動一次，但我希望它不斷滾動，直到我鼠標(biāo)移開。當(dāng)我懸停在控件上時(shí)，如何使 goRight()/goLeft() 循環(huán)？
查看完整描述

2 回答

?
RISEBY

TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超5個(gè)贊

一種解決方案是使用setInterval()應(yīng)該在 上取消的方法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);


查看完整回答
反對 回復(fù) 2023-10-20
?
jeck貓

TA貢獻(xiàn)1909條經(jīng)驗(yàn) 獲得超7個(gè)贊

您可以創(chuàng)建一個(gè)布爾值，當(dāng)用戶將鼠標(biāo)懸停在元素上時(shí)，該布爾值將為“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);

當(dāng)然，你也必須對左側(cè)做同樣的事情。


查看完整回答
反對 回復(fù) 2023-10-20
  • 2 回答
  • 0 關(guān)注
  • 145 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號