Question

任何人都可以告诉我如何以定时方式围绕另一个div旋转div？基本动机是制作倒数计时器/时钟。

Answer 1

使用三角学和setInterval：

HTML：

<div id="a">a</div><div id="b">b</div>

CSS：

div { position: absolute; }
#a { top: 50px; left: 50px; background-color: red; }
#b { top: 0px; left: 0px; background-color: green; }

脚本：

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(Math.round(angle) * Math.PI/180.0));
    var l = o.left+ (distance * Math.cos(Math.round(angle) * Math.PI/180.0));

    $('#b').css({
        top: t,
        left: l
    });

    angle += (speed * (rate/1000)) % 360;
}

$(function() {
   setInterval(f, rate);
});

Live demo.

如果你想在没有绝对定位的情况下这样做，你可能希望摆弄这些位置。

Answer 2

这是一个jquery轨道函数（现场演示 - http://jsfiddle.net/tGY4B/6/）

    ( 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: true  // 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);

然后您可以这样称呼它：

$('#rotatethis').orbit($('#aroundthis'  ), {orbits:  8, period:  2000});

很简单，嗯？

Answer 3

你可以结合css变换rotate和translate来获得这种效果。即在关键帧中，如下面的代码：

from {transfrom: :translateX(50px) rotate(0);}
to {transform: translateX(50px) rotate(360);}

这假设两个div在同一点“居中”。

Answer 4

查看JQuery Clock Plugin。他们正在使用这个CSS属性：

-moz-transform: rotate(138deg)

使用Jquery围绕另一个旋转div

4 个答案:

Live demo.