保持动画背景居中
我的目标是拥有一个横跨整个浏览器窗口的图像栏，并且无论用户如何调整窗口都保持居中。这很简单，但我还想要图像定期向右滚动，不断循环，同时仍然保持“居中”。
现在我正在尝试使用背景图像来完成此任务，因为我可以使图像达到我想要的宽度，而无需创建滚动条。再加上内置的CSS水平重复能力是实现“循环”效果的简单方法。
我正在使用以下 jquery 代码对背景图像进行动画处理：
function scrollingIMG() {
$('#my_div').delay(5000).animate(
{backgroundPosition:'+=200px 0'},
500,
'linear',
function() { scrollingIMG();
});
};
不幸的是，当调整浏览器窗口时，此代码触发的第二个背景不再居中，并且不再与网站的其余内容同步移动。我是否缺少一个简单的 css/jquery 命令，该命令可以使背景图像与其余内容保持同步，同时仍将其向右移动？
My goal is to have an image bar that stretches across the entire browser window and remains centered regardless of how the user adjusts the window. That's easy, but what I also want is the image to periodically scroll to the right, in a constant loop, while still remaining 'centered'.
Right now I'm trying to accomplish this with a background image, since I can make the image as wide as I want without creating scrollbars. Plus the built-in css ability to repeat horizontally is a simple way to achieve the "looping" effect.
I'm using the following jquery code to animate the background image:
function scrollingIMG() {
$('#my_div').delay(5000).animate(
{backgroundPosition:'+=200px 0'},
500,
'linear',
function() { scrollingIMG();
});
};
Unfortunately the second this code fires the background is no longer centered and no longer moves in sync with the rest of the site content when the browser window is adjusted. Am I missing an easy css/jquery command that would keep the backgroundimage in sync with the rest of the content, while still shifting it to the right?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
使用 center 而不是 0：
BackgroundPosition:'+=200 center'这应该可以解决问题
Use centre instead of 0:
BackgroundPosition:'+=200 center'That should do the trick
您还可以使用：
You can also use: