Question

我的目标是让图像栏横跨整个浏览器窗口并保持居中，无论用户如何调整窗口。这很容易，但我还想要的是图像周期性地向右滚动，在一个恒定的循环中，同时仍然保持“居中”。

现在我正在尝试使用背景图像完成此操作，因为我可以在不创建滚动条的情况下使图像尽可能宽。此外，内置的css水平重复功能是实现“循环”效果的简单方法。

我正在使用以下jquery代码为背景图像设置动画：

    function scrollingIMG() {
       $('#my_div').delay(5000).animate(
           {backgroundPosition:'+=200px 0'},
           500,
           'linear', 
           function() { scrollingIMG(); 
       });
    };

不幸的是，第二个此代码触发后台不再居中，并且在调整浏览器窗口时不再与其他站点内容同步移动。我错过了一个简单的css / jquery命令，它可以使backgroundimage与其他内容保持同步，同时仍然将它移到右边？

Answer 1

使用center而不是0：

BackgroundPosition:'+=200 center'

应该做的伎俩

Answer 2

您也可以使用：

'background-position-y': '50%'

保持动画背景居中

2 个答案: