jquery - ロゴの周りに 3 つの要素の軌道を作成する方法

Question

私は初心者で、最初のプロジェクトに取り組んでいます:

3 つの要素 (画像) と 1 つのロゴがあります。

画像をクリックすると、この 1 つと他の 2 つの画像がロゴの周りを 360° の軌道で移動する必要があります (ロゴの背面に移動するときは z-index が低いため、消えてから再び表示されます)。

これはjqueryとcss3で可能ですか?

Answer 1

Hiya 2 のデモは単純なものから始まります。

1) (div を使用) http://jsfiddle.net/ErN8X/2/show & code: http://jsfiddle.net/ErN8X/2/

2) http://jsfiddle.net/qXP7H/show/およびコード: http://jsfiddle.net/qXP7H/

こちらもご覧ください: jQuery plugin to make an element orbit another?

2 番目のデモでは、jsfiddle からコードをコピーして貼り付けることができます。これが役立つはずです。良いものを持ってください。これが役立つ場合は、回答を受け入れることを忘れないでください.! :)

簡単なデモ用の Jquery

var angle = 0;     // starting position (degrees)
var distance = 30; // distance of b from a
var speed = 60;    // revolution speed in degrees per second
var rate  = 10;    // refresh rate in ms

function f() {

    var o = $('#a').offset();

    var t = o.top + (distance * Math.sin(angle * Math.PI/180.0));
    var l = o.left+ (distance * Math.cos(angle * Math.PI/180.0));

    $('#b').css({
        top: t,
        left: l
    });
    $('#c').css({
        top: t + 20,
        left: l + 30
    });
    $('#d').css({
        top: t +40,
        left: l +40
    });
    angle += (speed * (rate/1000)) % 360;
}

setInterval(f, rate);
​