javascript - 使用 jQuery 使多个物体在同一轨道上旋转但位置不同

Question

您好，我试图找到一个小脚本的解决方案，该脚本可以围绕 1 个中心旋转对象，但这对我来说似乎有点太棘手了。 我找到了几乎完美的解决方案，并尝试修改它以满足我的需要，但有一个问题。

我正在尝试使 3 个带有文本的对象以相同的速度、相同的轨道但不同的起始位置旋转，就好像它们是等边三 Angular 形的顶点一样。

这是我的 fiddle到目前为止:

    ( function ( $ ) {
        jQuery.fn.orbit = function(s, options){
            var settings = {
                            orbits:    1     // Number of times to go round the orbit e.g. 0.5 = half an orbit
                           ,period:    3000  // Number of milliseconds to complete one orbit.
                           ,maxfps:    25    // Maximum number of frames per second. Too small gives "flicker", too large uses lots of CPU power
                           ,clockwise: false  // Direction of rotation.
            };
            $.extend(settings, options);  // Merge the supplied options with the default settings.

            return(this.each(function(){
                var p        = $(this);

/* First obtain the respective positions */

                var p_top    = p.css('top' ),
                    p_left   = p.css('left'),
                    s_top    = s.css('top' ),
                    s_left   = s.css('left');

/* Then get the positions of the centres of the objects */

                var p_x      = parseInt(p_top ) + p.height()/2,
                    p_y      = parseInt(p_left) + p.width ()/2,
                    s_x      = parseInt(s_top ) + s.height()/2,
                    s_y      = parseInt(s_left) + s.width ()/2;

/* Find the Adjacent and Opposite sides of the right-angled triangle */
                var a        = s_x - p_x,
                    o        = s_y - p_y;

/* Calculate the hypotenuse (radius) and the angle separating the objects */

                var r        = Math.sqrt(a*a + o*o);
                var theta    = Math.acos(a / r);

/* Calculate the number of iterations to call setTimeout(), the delay and the "delta" angle to add/subtract */

                var niters   = Math.ceil(Math.min(4 * r, settings.period, 0.001 * settings.period * settings.maxfps));
                var delta    = 2*Math.PI / niters;
                var delay    = settings.period  / niters;
                if (! settings.clockwise) {delta = -delta;}
                niters      *= settings.orbits;

/* create the "timeout_loop function to do the work */

                var timeout_loop = function(s, r, theta, delta, iter, niters, delay, settings){
                    setTimeout(function(){

/* Calculate the new position for the orbiting element */

                        var w = theta + iter * delta;
                        var a = r * Math.cos(w);
                        var o = r * Math.sin(w);
                        var x = parseInt(s.css('left')) + (s.height()/2) - a;
                        var y = parseInt(s.css('top' )) + (s.width ()/2) - o;

/* Set the CSS properties "top" and "left" to move the object to its new position */

                        p.css({top:  (y - p.height()/2),
                               left: (x - p.width ()/2)});

/* Call the timeout_loop function if we have not yet done all the iterations */

                        if (iter < (niters - 1))  timeout_loop(s, r, theta, delta, iter+1, niters, delay, settings);
                    }, delay);
                };

/* Call the timeout_loop function */

                timeout_loop(s, r, theta, delta, 0, niters, delay, settings);
            }));
        }
    }) (jQuery);

       $('#object1'  ).orbit($('#center'  ), {orbits:  2, period:  8000});
$('#object2'  ).orbit($('#center'  ), {orbits:  4, period:  4000});
$('#object3'  ).orbit($('#center'  ), {orbits:  8, period:  2000});

HTML:

<h1> Example</h1>
<div id='rotation'>
    <div id='center'    >C</div>
    <div id='object1'  >Text1</div>
    <div id='object2'  >Text2</div>
    <div id='object3'  >Text3</div>
</div>

CSS:

#rotation {position: relative; width: 600px; height: 600px; background-color: #898989}
#center         {position: absolute; width:  20px; height:  20px;
           top: 300px; left: 300px; background-color: #ffffff;
           -moz-border-radius: 40px; border-radius: 40px;
           text-align: center; line-height: 15px;
}
#object1        {position: absolute; width:  36px; height:  36px;
           top: 300px; left: 200px; background-color: #ff8f23;
           -moz-border-radius: 18px; border-radius: 18px;
           text-align: center; line-height: 30px;
}

#object2        {position: absolute; width:  36px; height:  36px;
           top: 300px; left: 200px; background-color: #ff8f23;
           -moz-border-radius: 18px; border-radius: 18px;
           text-align: center; line-height: 30px;
}

#object3        {position: absolute; width:  36px; height:  36px;
           top: 300px; left: 200px; background-color: #ff8f23;
           -moz-border-radius: 18px; border-radius: 18px;
           text-align: center; line-height: 30px;
}

我对每个对象使用了不同的速度和转数，因为我不知道如何在不搞乱的情况下设置不同的起始位置。如果我触摸 CSS 中任何对象的 x,y 坐标，那么轨道就会困惑。看来物体位置的计算是有联系的。如果我改变坐标，那么计算也会改变。但我不知道如何解决这个问题。

Answer 1

如果您更改每个元素的起始位置并在每个元素上调用 .orbit 函数并传递相同的参数，那么它应该可以工作。

看看这个:fiddle

这是您的 fiddle 的稍微修改版本。 (更改了调用 .orbit 函数时的起始位置和参数。

如果我错了或者我没有回答你的问题，请纠正我。