jquery - 如何围绕徽标创建三个元素的轨道

Question

我是新手，我正在进行我的第一个项目：

我有三个元素（图像）和一个徽标。

当我点击一张图片时，这一张和另外两张应该在徽标周围 360° 的轨道上移动（当它们进入徽标背面时，z-index 较低，因此它们可以消失然后重新出现）。

这可能与 jquery 和 css3 吗？

Answer 1

Hiya 2 演示从简单开始：

1）（使用 div）http://jsfiddle.net/ErN8X/2/show & 代码：http: //jsfiddle.net/ErN8X/2/

2) http://jsfiddle.net/qXP7H/show/和代码：http: //jsfiddle.net/qXP7H/

另请参阅此处：jQuery plugin to make an element orbit another?

对于第二个演示，您可以从 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);
​