0

I would like to have multiple images rotate, or gyrate, or spin, whatever the term best describes the 2D image rotate, from the same document.

The jquery plugin that does this for one image is: http://code.google.com/p/jqueryrotate/wiki/Examples

Although the example page shows many instances of rotating images, these are loaded from iframes. Meaning, each rotating image is the portion of another document shown through iframe.

I am trying to rotate different images, at different speeds, and in different angles and it is not working.

For example, for two images I used code

var angle = 0;

    setInterval(function(){
      angle+=3;
     jQuery(".process-1").rotate(angle);
},50);
setInterval(function(){
      angle-=3;
     jQuery(".process-2").rotate(angle);
},30);

Thank you

4

2 回答 2

1

它似乎在多个图像上工作正常。你没有解释你想要什么，但这里是旋转三个图像的代码......

http://jsfiddle.net/RwEme/603/

var rotation = function (){
   $("#image, #image2, #image3").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation,
      easing: function (x,t,b,c,d){        // t: current time, b: begInnIng value, c: change In value, d: duration
          return c*(t/d)+b;
      }
   });
}
rotation();

HTML：

<img src="https://www.google.com/images/srpr/logo3w.png" id="image"/>
<img src="https://www.google.com/images/srpr/logo3w.png" id="image2"/>
<img src="https://www.google.com/images/srpr/logo3w.png" id="image3"/>​

编辑：

这是另一个基于对 OP 的编辑的工作演示。

http://jsfiddle.net/RwEme/604/

它不起作用，因为您试图将相同的变量 ( angle) 用于两个不同的事物。

var angle = 0,
    angle2 = 0;

setInterval(function() {
      angle += 3;
     $("#image").rotate(angle);
},80);
setInterval(function() {
      angle2 -= 3;
     $("#image2").rotate(angle2);
},20);​
于 2012-04-19T22:53:26.750 回答
0

他们确实使用旋转动画。您必须确保将每个旋转包装在不同的函数中，以便angle变量的范围仅限于该函数。否则，两个动画共享相同的变量，这将不起作用。这是其中两个的工作jsfiddle：

http://jsfiddle.net/YKj5D/215/

我使用此代码启动动画

(function() {
  var angle = 0;
  setInterval(function(){
      angle+=3;
     $("#image3").rotate(angle);
  },50);
}​)();

(function() {
  var angle = 0;
  setInterval(function(){
      angle+=10;
     $("#image4").rotate(angle);
  },50);
})();
​
​
于 2012-04-19T22:52:09.143 回答