如何创建一个围绕一个标志三个要素的轨道(How to create an orbit of thre

2019-10-16 15:03发布

我是新手,我在我的第一个项目:

我有三个要素(图像)和一个标志。

当我在图像上单击这一个,(当他们走在标识的背面,使他们能够消失,然后重新出现具有低的z-index)其他两个的人应该在标识周围360°的轨道移动。

这可能与jQuery和CSS3?

Answer 1:

你好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插件,使一个元素轨道另一个?

对于第二个演示中,你可以复制粘贴的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);
​


文章来源: How to create an orbit of three elements around a logo