4

jqueryを使用して同じ軌道円内の複数の画像を回転させる必要があります。両方の画像の時間間隔を変更して遅延させました。問題は、数秒後に両方の画像が重なっていることです。私のコードは

            <script type="text/javascript">
            var p = 0;

            function moveit() {
            p += 0.02;

            var r = 135;
            var xcenter = 500;
            var ycenter = 200;
            var newLeft = Math.floor(xcenter + (r * Math.cos(p)));
            var newTop = Math.floor(ycenter + (r * Math.sin(p)));
            $('#friends').animate({
                    top: newTop,
                    left: newLeft,
                }, 10, function() {
                    moveit();
            $('#friends2').animate({
                top: newTop,
                left: newLeft,
            },15, function() {
                moveit();
            });
             }
            $(document).ready(function() {
                moveit();    
            });
            </script>

私のcssとhtmlのソースコードは

   #friends { position: absolute;     }         
     #friends2 { position: absolute;    }     

 <img src="Images/info.gif" id="friends"/>
<img src="Images/circle.jpg" id="circles" />
<img src="Images/help.gif" id="friends2" />

ライブデモ： http： //jsfiddle.net/W69s6/embedded/result/しかし、これは単一の画像用です..何か提案はありますか??

編集::私の画像 画像の回転

また

サンプルリンクhttp://www.templatemonster.com/demo/38228.html

4

2 に答える 2

5

この例を確認してください

同じ軌道を同じ速度で回転している2つのアイテムがあります。重なることはありません。

編集：

これは、4つのアイテムを同じ速度、同じ軌道で回転させ、均等に分離する例です。

さらにアイテムを追加するには、コードに別の角度を追加してコードを微調整します。

アップデート：

そして、これがシンプルな画像バージョンです

これがお役に立てば幸いです。乾杯 ！！！

于 2012-05-12T15:22:47.440 に答える
1

構文エラーがあったように見えますが、コードは機能します。最初のmoveit呼び出しが適切に終了しませんでした。

これは同じ軌道、異なる速度を持っています http://jsfiddle.net/thinkingsites/FyMCc/

編集

エラーは、同じ関数で両方のアイテムを回転するコマンドを配置することでした。それらは両方とも同じ上部と左側をつかみ、常に相互にバインドされていました。もちろん、両方ともmoveit（）を呼び出したため、moveitが呼び出されるたびに、内部でさらに2回呼び出されます。

再帰が1回だけ発生するように修正し、moveitがターゲット要素と別の開始位置（シフト）を受け入れるようにしました。

これは同じ軌道、同じ速度、異なる場所を持っています http://jsfiddle.net/thinkingsites/QAT7C/11/

于 2012-05-12T12:31:21.140 に答える