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

时间:2012-04-24 08:55:44

标签: jquery css3 canvas css-transitions orbit

我是新手,我正在进行第一个项目:

我有三个元素(图像)和一个徽标。

当我点击图像时,这一个和另外两个应该围绕徽标在360°的轨道上移动(当它们在徽标的背面时具有低z-index,因此它们可以消失然后再次出现)。

这可以用jquery和css3吗?

1 个答案:

答案 0 :(得分:4)

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);
​