8

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

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

网络上可能有任何例子吗？

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

谢谢你。

4

6 回答 6

11

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

（假设我使用了两张图片width of container <= width of image。）

你可以使用例如：

于 2012-06-23T14:51:36.657 回答
6

You can do this without jquery by using CSS3 animations. I'm assuming the city background image is set up to repeat-x seamlessly on the container.

You set up your keyframes to animate the background image the width of the repeatable image and tell it to loop infinitely with no delay. For example, my drifting clouds image is 1456 px wide and repeats 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;
}

Make sure you set @-webkit-keyframes, @-moz-keyframes, @-o-keyframes and -webkit-animation, -moz-animation, -o-animation the same to cover FF, Safari and Chrome.

http://jsfiddle.net/JQjGZ/

于 2012-09-20T18:48:03.633 回答
2

那里有他们称之为“图像拼接”的解决方案，人们为此制作了插件。

http://www.jquery4u.com/plugins/jquery-360-degrees-image-display-plugins/

这个也适用于移动设备。 http://spritespin.ginie.eu/examples.html

于 2012-06-23T14:54:31.490 回答
1

如果您只针对 webkit-browsers，您可以单独使用 CSS3 完成此操作。CSS3 内置了对动画的支持。通过使用迭代计数属性指定“无限”，您的动画将永远持续下去......你明白了;-)

@-webkit-keyframes rotateEndlessly
{
    from 
    {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to 
    {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

img 
{
    -webkit-animation-name: rotateEndlessly;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

}

当然，您的 HTML 中的图像：

<img src="image.jpg" alt="image" />
于 2012-06-23T14:25:40.700 回答
1

您可以使用背景位置和 jquery animate 函数，请参见示例：

http://jsfiddle.net/DG8PA/3/

在完成事件中获取一个无限的背景并从 0 到背景宽度设置背景位置为 0 并再次触发动画。

于 2012-06-23T14:55:08.387 回答
0

You could use CSS animations to achieve such a "look around" effect - great for parallax!

Instead of adding multiple images and animating their left etc, you could just set a background and animate its background-position:

#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;}  
}

This would work with new Gecko/Chromium browsers (w/vendor prefix adjusted); fiddled

于 2012-06-25T00:32:12.347 回答