无法在setInterval函数上移动元素

时间:2017-07-20 05:28:42

标签: javascript

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

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

wave.onmouseover = moveWave();

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

2 个答案:

答案 0 :(得分:0)

问题在于以下行: wave.style.backgroundPositionX + = 10 +' px&#39 ;;

第一次调用后,wave.style.backgroundPositionX将为: 10px的

下次通话后,wave.style.backgroundPositionX将为: 10px10px - >格式不正确。

正确的方法是:

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

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

答案 1 :(得分:0)

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);
}