2009-05-09 9 views
0

divを循環回転で使用することは可能ですか? HTMLページに4つのDIVがあります。私はこれらのDIVを循環的に回転させる必要があります。Div Javascriptを使用したサイクルローテーションで移動

私には今話せます。それは急務であります。

+0

通常のテキスト形式で質問してください。あなたがコードブロックとしてフォーマットしたようです(それはそうではありません!)。 –

答えて

0

これはおそらく完了する可能性がありますが、簡単ではないため、div内のコンテンツの元の感覚を維持することができません。

あなたの質問に間違いがない限り、あなたがちょうど4つのdivsを通ってサイクリングしているとすれば...これは反抗的に可能で非常に簡単です。しかし、あなたが実際のdivを回転することができるかどうかを尋ねる場合...

+0

はい。サイクリングdiv。あなたがコードplz – kumar

+7

Raviを送ってくれたなら、もう少し詳しく質問を書いてください。あなたのコメントはチャドの質問に本当に答えるものではありません。 4つのDIVのそれぞれを順番に表示したいのですか、または1つのDIVの内容を回転させたいのですか? –

+0

こんにちはPaul、 リンク先はhttp://www.avineon.com/openです。このリンクは上部を参照してください。 4つの画像が同じように回転しています。私はJavaScriptを使用する必要があります。 – kumar

1

Raphaël JavaScriptライブラリを使用して、このような処理を行うことができます。

スティーブ

+0

これはすばらしいライブラリですが、ほとんどのブラウザがSVGの実装を保留していたため、クロスブラウザではないという欠点があります。しかし、すべての主要な現在のブラウザリリースはSVGをサポートしています。 –

+0

おそらく、IEのSVGサポートをテストし、サイトを動作させるadobeプラグインをどこからダウンロードする必要があるかを示すことができます。 –

4

それは難しい、実際にはありません。

function moveDiv(t,mdiv) { 
      t = t + 0.05; // "time" 
      var r = 10, //radius of circle 
       xcenter = 400, //x location of circles centre on screen 
       ycenter = 400, //y location of circles centre on screen 
       x = Math.floor(xcenter + (r * Math.cos(t))), //circles parametric function 
       y = Math.floor(ycenter + (r * Math.sin(t))); //circles parametric function 
      mDiv.style.top = x + "px"; //set divs new coordinates 
      mDiv.style.left = y + "px"; //set divs new coordinates 

      setTimeout(function() { //make sure the animation keeps going 
       moveDiv(t,mdiv); 
      }, 100); 
} 
    myDiv = //get div element 
    moveDiv(1,myDiv); //start the animation 

はテストしていませんが、それはどのように動作するかについてです。これらのdivのcss "position"プロパティを絶対または固定に設定してください。サークルの場合はparametric equationもご覧ください。

関連する問題