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

【问题标题】：How to create an orbit of three elements around a logo如何围绕徽标创建三个元素的轨道
【发布时间】：2012-04-24 08:55:44
【问题描述】：

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

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

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

jquery 和 css3 可以做到这一点吗？

【问题讨论】：

你好！我可以在 jquery 和 css（用于太阳系示例）中为您提供一个带有轨道运动的 jsfiddle，您可以阅读代码并放置您的徽标而不是 sun；你觉得这听起来不错吗？如果这个答案听起来可以接受，那么请告诉我，祝你好运！
是的，如果这对你来说不是很浪费时间的话，我真的很感激！
Cooleos 等一下，给我 2 分钟！干杯！

标签： jquery css canvas css-transitions orbit

【解决方案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);

【讨论】：

Hiya @Mattia 只需复制粘贴代码，即 html 到 html 将 Jquery 和 css 从 jsfiddle 放置到您的页面，这应该可以解决问题，这就是我轻弹 jsfiddle 的原因。使用笔记本电脑上的外部链接我有点不舒服，这不是我的，:) 希望上面的例子能帮助你接受它，cheerios :)
对不起 Tats 但我发布的链接是一张图片，是我想做的预览。我不知道如何在jsfiddle上发布它，它没有出现！您发布的示例具有不同的轨道，我的在同一轨道上有三个图像（我们将其称为行星），是否可以将您的示例与新位置的行星相适应？对不起我的无知和糟糕的英语，希望我不是在问月亮！（当我们讨论太阳系时：D）
Hiya @Mattia jsfiddle.net/ErN8X/10 或者这与同一轨道上的行星滚动到脚本底部并在“轨道的新位置”发生的地方玩弄轨道功能；希望这会有所帮助，:) 干杯
非常感谢，我会尝试使用您发布的代码并根据我的需要进行调整！
酷@Mattia 听起来像是一个计划。完全不用担心！我去看看能不能睡前看看，保重！