Jquery HTML5/CSS3-如何制作；“无止境”；旋转背景-360度全景

我有一张JPG图像，可以360度看到城市（9000px x 1000px）。我需要创建一个带有无限旋转背景的页面，例如给用户一个旋转摄像头的印象

第一部分-从图像的左向右滚动非常简单-只需使用jQuery.animate（…）。但我如何才能无缝地返回到图像的开头（在它完成359度转弯之后），这样用户就不会注意到“跳跃”之类的东西了

网上可能有什么例子吗

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

---

谢谢。

如果您只针对webkit浏览器，那么您可以单独使用CSS3来实现这一点。CSS3内置了对动画的支持。通过使用“迭代计数”属性指定“无限”，您的动画将永远持续下去。。。你明白了；-）

当然，HTML中的图像：

<img src="image.jpg" alt="image" />

旋转背景背后的主要思想是绘制两幅图像：一幅位于
（x，0）
，另一幅位于
（x-w，0）
，其中
w
是图像的宽度。您可以随时间增加
x
，只要
x==w
您就可以重置
x=0
。您将看不到此重置，因为第二个图像与第一个图像位于完全相同的位置。重置后，可以重新开始，使旋转看起来无穷无尽

（我使用了两个图像，假设容器的宽度
有一些解决方案，他们称之为“图像拼接”，人们已经为其制作了插件


这一款也适用于手机。
您可以使用背景位置和jquery动画功能，请参见示例：


拍摄一个无休止的背景，并在整个事件中从0到背景的宽度设置动画。将背景位置设置为0，然后再次启动动画。
您可以使用它来实现这种“环视”效果-非常适合视差

您可以只设置背景并设置其背景位置的动画，而不是添加多个图像并设置其左<代码>等的动画：

#bgscroll {  
    background:url(/*some nice seamless texture*/);
    -moz-animation-duration: 13s;  
    -moz-animation-name: bgscroll;
    -moz-animation-iteration-count: infinite;
}  
@-moz-keyframes bgscroll{  
    from {background-position: 0 0;}
    to   {background-position: 100% 0;}  
} 

这将适用于新的Gecko/Chromium浏览器（带供应商前缀调整）；
通过使用CSS3动画，您可以在不使用jquery的情况下实现这一点。我假设城市背景图像设置为在容器上无缝重复-x

设置关键帧以使背景图像具有可重复图像的宽度，并告诉它无延迟无限循环。例如，“我的漂浮云”图像的宽度为1456 px，重复x：

@keyframes DriftingClouds {
    0%      { background-position: 0 0; }
    100%    { background-position: -1456px 0; }
}

#wrapper {
    background: url(/images/clouds.png) repeat-x 0 0;
    animation: DriftingClouds 165s linear infinite;
}

确保将@-webkit关键帧、@-moz关键帧、@-o关键帧和-webkit动画、-moz动画、-o动画设置为相同，以覆盖FF、Safari和Chrome

使用canvas可以吗？这里有一个草稿：。哇！看起来很有希望。这是PlayBook平板电脑用的-我希望canvas能在那里工作。你能给我一个答案吗？+1；这是很有趣的东西。值得一提的是，这是OP想要的图像旋转示例：。（它的旋转比画布方式更平滑。）但是有一个非常明显的“跳跃”。我能让它像@pimvdb的解决方案一样工作吗？
@keyframes DriftingClouds {
    0%      { background-position: 0 0; }
    100%    { background-position: -1456px 0; }
}

#wrapper {
    background: url(/images/clouds.png) repeat-x 0 0;
    animation: DriftingClouds 165s linear infinite;
}