javascript - Javascript OnMouseOver 动画

Question

var positioner = 0;
var ames = setInterval(animate, 200);

function animate() {
    if(positioner <= 1000){
        document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px';
        positioner += 256;
    } else {
        document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px';
        positioner = 0;
    }
}

img { 
    background-image: url('https://cdn-images-1.medium.com/max/1600/1*WhDjw8GiV5o0flBXM4LXEw.png');
    background-repeat: no-repeat;
}

<img width="256px" height="256px" onmouseover="animate()"/>

这是我的代码，目前它正在自动移动，我想让它只是移动 onMouseOver!在我看来，如果可以将 setInterval 放入 animate() 函数中，那么这个问题就可以解决，但是如何将 setInterval 放入函数中??

Answer 1

在这里，最好的方法是将 mouseOver 和 mouseOut 作为监听器处理，并将 setInterval 存储在变量中，这样您就可以稍后清除。

var positioner = 0;
var ames;
var img = document.getElementsByTagName('img');

img[0].addEventListener('mouseover', () => {
    ames = setInterval(animate, 200);
});

img[0].addEventListener('mouseout', () => {
    if (ames)
        window.clearInterval(ames);
});

function animate() {
    if (positioner <= 1000) {
        img[0].style.backgroundPosition='-'+positioner+'px';
        positioner += 256;
    } else {
        img[0].style.backgroundPosition='-'+positioner+'px';
        positioner=0;
    }
}

img { 
    background-image: url('https://cdn-images-1.medium.com/max/1600/1*WhDjw8GiV5o0flBXM4LXEw.png');
    background-repeat: no-repeat;
}

<img width="256px" height="256px"/>