如何创建一个围绕标志的三个元素的轨道 [英] How to create an orbit of three elements around a logo

问题描述

我是新手，我在我的第一个专案：

I'm a newbie and I'm on my first project:

我有三个元素（图片）和标志。

I have three elements (images) and a logo.

当我点击图片时，这一个和另外两个应该围绕标志在360°的轨道上移动标志的背面，所以他们可以消失，然后重新出现）。

When I click on an image this one and the other two ones should move in an orbit of 360° around the logo (with a low z-index when they go on the back of the logo so they can disappear and then reappear).

这是否可以使用jquery和css3？

Is this possible with jquery and css3?

推荐答案

Hiya 2 demos 以简单开头：

Hiya 2 demos starts with simple:

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

1) (using divs) http://jsfiddle.net/ErN8X/2/show & code: http://jsfiddle.net/ErN8X/2/

2） http://jsfiddle.net/qXP7H/显示/ 和验证码： http://jsfiddle.net/qXP7H/

请参阅这里： jQuery插件使元素在另一个轨道上运行？

Please see here as well: jQuery plugin to make an element orbit another?

对于第二个演示，您可以从jsfiddle中复制粘贴代码。休息这应该有帮助，有一个很好的一个，不要忘了接受答案，如果这有帮助。 cheerios！ ：）

For the second demo you can copy paste the code from jsfiddle. rest this should help, have a nice one, and don't forget to accept answer if this helps. cheerios! :)

简单演示的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);
​

这篇关于如何创建一个围绕标志的三个元素的轨道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！