Question

我有一个宽度为400px的div元素和一个宽度为2000px的背景图像。我希望这个背景图像无休止地向侧面滚动，它必须永远不会到达和结束，因为bg图像被设置为重复（我认为HTML默认情况下这样做）。

我想过做这样的事情，但我不知道这是不是正确的方式：

$("#divWithScrollingBackground").animate({"background-position-x" : 999999999}, 999);

Answer 1

为了克服动画必须运行多长时间（以及多远）的不确定性，您可以使用“flyback-repeat”进行单周期动画。这更像是代码通常被编码的方式。

function bgScroll() {
    $("#x").animate({
        'backgroundPosition': '-2000px 0'
    }, 4000, 'linear', function() {
        $(this).css("backgroundPosition", '0 0');
        setTimeout(bgScroll, 0);
    });
};
bgScroll();

您需要使用this jQuery plugin让bg动画跨浏览器工作。

演示here。

调整我的4000毫秒以提供您想要的速度（较小的数字=更快的动画）。

'线性'对于在反激时尽可能平滑过渡非常重要。我认为jQuery默认的'swing'缓动会产生奇怪的效果，但无论如何都要尝试。

HTML / JQuery：具有滚动背景的div永远不会结束？

1 个答案: