jQuery动画圆形

Question

3

我需要使用Jquery制作一个动画圆:

这个圆将是一个圆形图片（比如说一个球），它将围绕自身旋转360度。

如何在没有flash的情况下完成呢？

它应该保持在同一位置，只旋转（四处漫游）。

- Dejell

360度是什么方向？你想要动画的是一张图片吗？为什么不制作一个gif呢？ - Chad

https://developer.mozilla.org/en/CSS/transform - karim79

2

请明确一下，球将会绕哪个轴旋转？ - Zsolt Schäfer

它可以是像时钟一样的gif方向。但图片将从第一刻开始就是完整的，但会以缓慢的速度不停地旋转。 - Dejell

https://github.com/clearideaz/jQuery.rotate - WhoSayIn

@ZsoltSchäfer 它应该围绕其主轴旋转。它应该始终保持在同一位置。 - Dejell

5个回答

0

只有在浏览器支持CSS3（减去其他诸如此类的黑客技巧，例如这个http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html）时，您才能旋转一个元素。在这种情况下，您应该设置一个时间函数来调整以下CSS：

-moz-transform:rotate(120deg);
-webkit-transform:rotate(120deg);
-o-transform:rotate(120deg);

看这个：

- ariejdl

你好！我在Chrome中尝试了你的示例，但它没有显示出来。这不是最新的浏览器吗？ - Dejell

0

对于CSS3的过渡和变换，您可以更好地使用这个不错的jQuery插件：http://ricostacruz.com/jquery.transit/

- Jean

0

如其他人所指出的，可以使用CSS3，或者使用SVG（例如http://raphaeljs.com/）或Canvas。

- terjeto

-1

- Thomas Brasington

这个不好 - 因为图像并不总是在同一个位置。它应该在同一个位置，只是围绕着它旋转。 - Dejell

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rich Bradshaw · Accepted Answer

不确定您想要什么，但是假设您希望它绕自己的轴旋转，请查看我刚刚编写的代码：

这仅在具有动画支持的浏览器中有效，但现在只有IE才有这种支持。IE10有支持。

要在旧版浏览器中获得旋转动画，您会遇到困难-除了使用动画gif之外，几乎没有其他选择。IE确实支持旋转属性，但非常有限。

您可以使用类似于https://github.com/clearideaz/jQuery.rotate/blob/master/jrotate.plugin.js的东西在任何地方运行它，但老实说，对于那些被困在旧硬件和旧浏览器上的用户来说，CPU成本通常不值得。