Question

我正在尝试做一个水平图像滑块

当我执行鼠标悬停时，它只会执行.scrollLeft /触发该功能一次并移动图像1px这是预期的，但只要鼠标在鼠标悬停事件上，我该如何让它运行？< / p>

示例网站here

回答示例here

HTML

    <div class="flex">
        <div id="slideLeft" class="center-c slideLeft"><div class="left"></div></div>
        <div id="slideRight" clasS="center-c slideRight"><div class="right"></div></div>
        <div id="imagesWrapper" class="imagesWrapper flex">
            <img src="img/1.jpg">
            <img src="img/2.jpg">
            <img src="img/3.jpg">
            <img src="img/4.jpg">
            <img src="img/5.jpg">
            <img src="img/6.jpg">
            <img src="img/7.jpg">
            <img src="img/8.jpg">
            <img src="img/9.jpg">
            <img src="img/10.jpg">
            <img src="img/11.jpg">
            <img src="img/12.jpg">
            <img src="img/13.jpg">
        </div>
    </div>

的Javascript

                //IMAGE SCROLL
                var slideLeft = document.getElementById('slideLeft');
                var slideRight = document.getElementById('slideRight');
                var imagesWrapper = document.getElementById('imagesWrapper');

                    slideLeft.addEventListener('mouseover', profileMouseOverLeft, false);
                    slideRight.addEventListener('mouseover', profileMouseOverRight, false);


                function profileMouseOverLeft() {
                    imagesWrapper.scrollLeft += -1;
//                profileMouseOverLeft();
                }
                function profileMouseOverRight() {
                    imagesWrapper.scrollLeft += 1;
//                profileMouseOverRight();
                }

如果我调用其中的函数，它将直接直接结束

如果我将功能更改为此功能，它们将永远运行...

            function profileMouseOverLeft() {
//                alert("Hi");
                imagesWrapper.scrollLeft += -1;
//                profileMouseOverLeft();
                setInterval(function(){
                    alert("Hello");
                    profileMouseOverLeft();
                }, 100);
            }
            function profileMouseOverRight() {
//                alert("Hello");
                imagesWrapper.scrollLeft += 1;
                setInterval(function(){
                    profileMouseOverRight();
                }, 100);
//                profileMouseOverRight();
            }

编辑最终的JS看起来像这样并且效果很好

            //IMAGE SCROLL
            var slideLeft = document.getElementById('slideLeft');
            var slideRight = document.getElementById('slideRight');
            var imagesWrapper = document.getElementById('imagesWrapper');
            var profileRightInterval;
            var profileLeftInterval;

            slideLeft.addEventListener('mouseover', profileMouseOverLeft, false);
            slideRight.addEventListener('mouseover', profileMouseOverRight, false);


            function profileMouseOverLeft() {                
                profileLeftInterval = setInterval(function () {
                    profileMoveLeft();
                }, 25);
            }
            function profileMouseOverRight() {
//                alert("Musen er nu inde");
                profileRightInterval = setInterval(function () {
                    profileMoveRight();
                }, 25);
            }
            function profileMoveLeft(){
                imagesWrapper.scrollLeft += -10;
            }
            function profileMoveRight(){
                imagesWrapper.scrollLeft += 10;
            }
            slideLeft.addEventListener('mouseout', function (e) {
                clearInterval(profileLeftInterval);
            });
            slideRight.addEventListener('mouseout', function (e) {
                clearInterval(profileRightInterval);
            });

Answer 1

您需要将mouseover和mouseout事件组合在一起。在mouseover事件中，使用setInterval。

然后在mouseout事件中，使用clearInterval()函数来中断SetInterval函数。

Answer 2

您想要使用的是mouseover，mouseout和mousemove的组合。

简而言之，这个过程是： - 在mouseover上，添加mousemove事件并记录鼠标的x和y - 在mouseout上，移除mousemove事件 - 在mousemove上，将x和y与上一步进行比较。如果它移动得那么多，那就做点什么。

在你的情况下，看起来你想每1px移动一次，所以你会每走一步都做一些事情。

它是这样的：

let lastX, lastY;
function mouseMoveFunc(e) {
  const diffX = e.clientX - lastX;
  const diffY = e.clientY - lastY;
  lastX = e.clientX;
  lastY = e.clientY;

  // do something with diffX and diffY
}

slideLeft.addEventListener('mouseover', function (e) { 
  slideLeft.addEventListener('mousemove', mouseMoveFunc);
  lastX = e.clientX;
  lastY = e.clientY;
}

slideLeft.addEventListener('mouseout', function (e) {
  slideLeft.removeEventListener('mousemove', mouseMoveFunc);
}

现在，每次移动鼠标时，mousemove功能都会触发，你可以用差异做一些事情（鼠标在每个勾号之间移动了多少）。

添加和删除mousemove事件非常重要，因为它是一个相对昂贵的事件，可以触发很多事情，如果它没有发生，你也不希望它发生需要。

鼠标悬停 - 如何多次触发？

2 个答案: