Question

我希望从同一文档中旋转，旋转或旋转多个图像，无论最佳描述2D图像旋转的术语是什么。

为一个图像执行此操作的jquery插件是：http://code.google.com/p/jqueryrotate/wiki/Examples

虽然示例页面显示了旋转图像的许多实例，但这些实例都是从iframe加载的。意思是，每个旋转图像都是通过iframe显示的另一个文档的一部分。

我试图以不同的速度和不同的角度旋转不同的图像，但它无法正常工作。

例如，对于两个图像，我使用了代码

var angle = 0;

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

谢谢

Answer 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);

Answer 2

它们适用于旋转动画。您必须确保将每个旋转包装在不同的函数中，因此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);
})();

多个图像实例旋转插件，jQuery

2 个答案: