jQuery动画圈

时间:2012-02-15 14:26:59

标签: javascript jquery

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

这个圆圈将是一个圆形图片(比方说一个球)将自己360度旋转。

如果没有闪光灯怎么办呢?

它应该停留在同一个地方,但只会旋转(四处游荡)

5 个答案:

答案 0 :(得分:2)

不确定你真正想要的是什么,但假设你希望它在它自己的轴上旋转,看看这个我刚刚掀起的代码:

http://jsfiddle.net/RpjuD/2/

这仅适用于具有动画支持的浏览器,但现在真的只有IE浏览器。 IE10有支持。

要在较旧的浏览器中获得旋转动画,你会陷入困境 - 使用动画gif的选项不多。 IE确实支持旋转属性,但它非常有限。

你可以使用类似https://github.com/clearideaz/jQuery.rotate/blob/master/jrotate.plugin.js之类的东西让它在任何地方都能正常工作,但说实话,使用旧硬件的旧版浏览器上的用户的CPU成本通常不值得。

答案 1 :(得分:0)

如果浏览器兼容CSS3(减去其他hack,例如此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);

看到这个:

http://davidwalsh.name/css-transform-rotate

答案 2 :(得分:0)

使用其他人指出的CSS3,或使用SVG(例如http://raphaeljs.com/)或画布。

答案 3 :(得分:0)

对于CSS3过渡和转换,你可以更好地使用这个漂亮的jQuery插件:http://ricostacruz.com/jquery.transit/

答案 4 :(得分:-1)