我有一张小图片可能会在悬停事件中改变他的background-position-x。并停止在mouseleave上移动。但即使使用setInterval,我的fuctuin只运行一次。这是我的代码。有人能帮助我吗?
let wave = document.querySelector('.wave');
wave.onmouseover = moveWave();
function moveWave() {
setInterval(function () {
wave.style.backgroundPositionX += 10 + 'px';
}, 100)
}
答案 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);
}