0

同じドキュメントから、2D画像の回転を最もよく表す用語が何であれ、複数の画像を回転、回転、または回転させたいと思います。

1つの画像に対してこれを行うjqueryプラグインは次のとおりです。http ：//code.google.com/p/jqueryrotate/wiki/Examples

サンプルページには回転画像の多くのインスタンスが表示されていますが、これらはiframeから読み込まれます。つまり、回転する各画像は、iframeで表示される別のドキュメントの一部です。

さまざまな画像をさまざまな速度でさまざまな角度で回転させようとしていますが、機能していません。

たとえば、2つの画像にコードを使用しました

var angle = 0;

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

ありがとうございました

4

2 に答える 2

1

複数の画像で正常に機能しているようです。あなたはあなたが望むものを説明しませんでした、しかしここに3つの画像を回転させるためのコードがあります...

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同じ変数（ ）を2つの異なるものに使用しようとしているため、機能しませんでした。

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変数のスコープがその関数に制限されるように、各回転を異なる関数でラップすることを確認する必要があります。そうしないと、両方のアニメーションが同じ変数を共有し、機能しなくなります。これが2つで動作する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 に答える