使用javascript减少背景位置css

Question

我正试图通过更改div中图像的background-position来运行动画。我正在使用setTimeout来调用该函数并连续递减图像位置(因此它看起来是动画的)。我已经测试了变量和setTimeout，它们似乎工作得很好。然而，图像根本没有移动。

如何修改代码以使此动画能够运行？

var decrement = 0;
function runningRobot() {
var robotCont = document.getElementById('robotCont');
if(decrement < -660) {
decrement = 0;
}
robotCont.style.backgroundPositon = decrement+ 'px' +' '+ 0 + 'px';
decrement -= 110;  
timer = setTimeout(runningRobot,500);
}
runningRobot();

Answer 1

您拼错了背景位置：

robotCont.style.backgroundPosition = decrement + 'px' + ' ' + 0 + 'px';

我也不知道你是否需要左边的位置设置。我认为0是默认值，因为它排在第二位，所以可以省略它，对吧？

robotCont.style.backgroundPosition = decrement + 'px';

Answer 2

为了改进公理82的答案，您还可以通过将单独的部分放在一起来减少代码。您可以将其从:更改为

robotCont.style.backgroundPosition = decrement + 'px' + ' ' + 0 + 'px';

到：

robotCont.style.backgroundPosition = decrement + 'px 0px';

正如antyrat在评论中所建议的那样。

为了纠正公理82，不允许省略第二个0px，正如MDN文档中所示，它说background-position样式需要"一个列表，每个项目由两个关键字组成"。这意味着x和y都需要指定，第二个值不能省略。