使用Javascript重新创建简单的Flash动画

Question

我在jQuery，mootools或原型中创建了一个真正锐利的介绍效果：http://www.johndigweed.com/（只是旋转效果）所以从某种意义上说，我想旋转在页面的主要内容div中。

任何建议开始或有基地插件，有助于在Flash之外实现这个介绍效果？或者，这种效果甚至可以用JavaScript来做？

我是JavaScript的许诺谢谢你！

Answer 1

它不会在每个站点和任何浏览器还没有工作，但它是一个开始：

var i = -90, 
    ii = -900, 
    timer, 
    body = jQuery("body"); 

function rotation() { 
    body.css({ 
     '-moz-transform': 'rotate('+(i++)+'deg)', 
     top: (ii+=10) + "px" 
    }); 
    if(i>0){ 
     clearInterval(timer); 
    } 
} 

body.css({ 
    '-moz-transform': 'rotate('+i+'deg)', 
    top: ii+"px", 
    position: "absolute" 
}); 

timer = setInterval(function(){rotation();}, 100); 

Answer 2

作为一般规则，假设有些事情是可能的，直到你给自己一个脑震荡。

无论如何，有可能做基于JavaScript的动画，简单的东西已经在jQuery等实现（幻灯片和淡入淡出等）。

我的初步研究已经导致相信这种动画目前只能用于webkit浏览器（和IE，使用非常不同的方法和线性代数）。有一个叫-webkit-变换具有值为“旋转（）”

您可以设置旋转WebKit的风格（这里使用jQuery，因为它是我知道的）是这样的：

jQuery("#div").css('-webkit-transform', 'rotate(20deg)') 

的deg位是重要的，否则它不起作用（你也可以使用弧度rad而不是deg）

请记住，这只适用于webkit浏览器，这意味着safari和chrome。 Mozilla可能会使用类似的方法。

Answer 3

为此，您可以使用以下jQuery插件。

http://code.google.com/p/jquery-rotate/

后您包括jQuery和这个插件，你可以简单地这样做：

function rotation() { 
    //being #theimage the element id that you want to rotate 
    $('#theimage').rotateRight(45); 
} 

$("document").ready(function(){ 
    setInterval("rotation()",1000); 
}); 

这段代码很容易理解。文档准备就绪后（DOM准备就绪），您只需每1秒调用一次函数rotation()。每次执行旋转时，都会将图像旋转45度。

这更容易做到这个HTML5画布。如果你想我可以发布代码来做到这一点。