Question

我正试图制作一个大圆圈并沿着圆周移动div。

每个div都必须更改大圈内的内容。

div（s）的数量必须取决于从数据库中获取的数量（来自表类别）。

I tried to do this并通过.eq()修改了代码，但问题.eq是下一个圆圈将出现在该圆圈之后，所有这些都放在同一个地方。我希望它们全部同时显示like this而不重复功能

Answer 1

更新了你的小提琴：

用于：

var t = -1.6;
var t2 = -1.6;
var x = 0;
var t = [-1.6, -1.6, -1.6], // starting angle in radians for each circle

    delta = [0.05, 0.03, 0.02], // change in radians for each circle
                                // e.g the first moves fastest, the last 
                                // slowest. if this gets too big, the 
                                // movement won't look circular, since the
                                // animation is really a bunch of straight lines

    finish = [1.4, 1.0, 0.6];   // the stopping point in radians for each
                                // circle. if the circle size changes, this
                                // may need to change

function moveit(i) {
    t[i] += delta[i];    // move the angle forward by delta
    var r = 300;         // radius (the .inner div is 600 x 600)
    var xcenter = -30;   // center X position: this reproduces the .inner horizontal
                                // center but from the body element
    var ycenter = 420;   // center Y position: same here but vertical

    // Basic trig, these use sin/cos to find the vert and horiz offset for a given
    // angle from the center (t[i]) and a given radius (r)
    var newLeft = Math.floor(xcenter + (r * Math.cos(t[i])));
    var newTop = Math.floor(ycenter + (r * Math.sin(t[i])));

    // Now animate to the new top and left, over 1ms, and when complete call
    // the move function again if t[i] hasn't reached the finish.
    $('div.circle'+(i+1)).animate({
        top: newTop,
        left: newLeft,
    },1, function() {
      if (t[i] < finish[i]) moveit(i);
    });
    // You can slow down the animation by increasing the 1, but that will eventually
    // make it choppy. This plays opposite the delta.
}

// Start the ball rolling
$("document").ready(function(e) {
  moveit(0);
  moveit(1);
  moveit(2);
});

这是一个快速更改，将代码缩减为一个使用数组（t，delta，finish）来跟踪三个圆圈的函数。可以改进以任何开始/结束角度接受任意大小的任意圆圈。而且，这种动画使用CSS更容易。指定简单，性能更好。

jQuery圈子圈子路径上的动画

1 个答案: