Question

我正在尝试通过更改background-position内图片的div来运行动画。我正在使用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

你拼写错误的backgroundPosition：

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

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

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

Answer 2

为了改进axiom82的答案，你还可以通过将你所拥有的单独部分的数量放在一起来减少你的代码。你可以从：

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

以：

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

正如antyrat在评论中也提出的那样。

为了纠正axiom82，不允许省略第二个0px，因为可以在MDN docs上看到，background-position样式需要“列表，每个项目由两个关键词组成“。这意味着需要指定x和y，并且不能省略第二个值。

使用javascript减少背景位置css

2 个答案: