jquery - HTML5/CSS3 - 如何制作 "endless"旋转背景 - 360度全景

Question

我有一张 360 度城市 View 的 JPG 图片(9000 像素 x 1000 像素)。我需要创建一个具有无休止旋转背景 的页面 - 例如，给用户一种旋转网络摄像头的印象。

第一部分 - 从图像的左侧滚动到最右侧非常简单 - 只需使用 jQuery.animate(...)。但是我怎样才能无缝地返回到图像的开头(在它完成 359 度转弯之后)，这样用户就不会注意到“跳跃”或类似的东西？

网上有没有例子？

我只针对 HTML5/CSS3 (webkit) 浏览器，我可以使用最新的 jQuery。

谢谢。

Answer 1

旋转背景背后的主要思想是绘制两幅图像:一幅位于 (x, 0)。另一个在 (x - w, 0)与 w是图像的宽度。你可以增加x随着时间的推移，一旦x === w你重置了x = 0 .您不会在视觉上看到此重置，因为第二张图像与第一张图像位于完全相同的位置。重置后，您可以重新开始，这样旋转看起来无穷无尽。

(假设 width of container <= width of image，我使用了两张图片。)

你可以使用例如:

• Canvas :http://jsfiddle.net/yQMAG/ .这个动画在我的机器上有点不稳定。
• CSS3 动画:http://jsfiddle.net/k5Bug/ .