动画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"/>

​