Question

我有一张小图片可能会在悬停事件中改变他的background-position-x。并停止在mouseleave上移动。但即使使用setInterval，我的fuctuin只运行一次。这是我的代码。有人能帮助我吗？

let wave = document.querySelector('.wave');

wave.onmouseover = moveWave();

function moveWave() {
    setInterval(function () {
        wave.style.backgroundPositionX  += 10 + 'px';
    }, 100)
}

Answer 1

问题在于以下行： wave.style.backgroundPositionX + = 10 +＆＃39; px＆＃39 ;;

第一次调用后，wave.style.backgroundPositionX将为： 10px的

下次通话后，wave.style.backgroundPositionX将为： 10px10px - ＆gt;格式不正确。

正确的方法是：

var count = 10;
let wave = document.querySelector('.wave');
wave.onmouseover = moveWave();

function moveWave() {
    setInterval(function () {
        count += 10;
        wave.style.backgroundPositionX  = count + 'px';
    }, 100)
}

Answer 2

var count = 10;
let wave = document.querySelector('.wave');
wave.onmouseover = moveWave();
wave.onmouseleave = moveLeave();
var id;

function moveWave() {
    id = setInterval(function () {
        count += 10;
        wave.style.backgroundPositionX  = count + 'px';
    }, 100)
}

function moveLeave() {
  clearInterval(id);
}

无法在setInterval函数上移动元素

2 个答案: