jquery - 围绕底部的圆div旋转

Question

我找到了一个 JSFiddle:http://jsfiddle.net/wyW2D/1/

围绕圆圈移动 div。

我是 jQuery 的新手，所以我想知道您是否可以帮助我。我试图让主圆沿着底部移动，然后让 div 从右向左旋转。但是我不完全理解代码:(

这是 jQuery :

  var t = -1.6;
var t2 = -1.6;
var x = 0;
var t = [-1.6, -1.6, -1.6],
delta = [0.05, 0.03, 0.02],
finish = [1.4, 1.0, 0.6];
function moveit(i) {
t[i] += delta[i];
var r = 300;         // radius
var xcenter = -30;   // center X position
var ycenter = 420;   // center Y position

var newLeft = Math.floor(xcenter + (r * Math.cos(t[i])));
var newTop = Math.floor(ycenter + (r * Math.sin(t[i])));

$('div.circle'+(i+1)).animate({
    top: newTop,
    left: newLeft,
},1, function() {
    if (t[i] < finish[i]) moveit(i);
});
}
$("document").ready(function(e) {
//jQuery.easing.def = "easeOutBounce";
//$('div.circle1').hide().first().show();
moveit(0);
moveit(1);
moveit(2);
});

这是 CSS:

 @charset "utf-8";
/* CSS Document */

.background {
    background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.maincircle {

    position: absolute;
    left: -300px;
    height: 25px;
    padding-top: 150px;
}
.inner {
    width:600px;
    height:600px;
    border-radius: 2080px;
    background-color:#02E3E7;
    }
.text {
    font-family:"Segoe UI";
    font-size: 18px;
    z-index: 99;
    padding-top: 300px;
    padding-left: 100px;
    text-align:right;
    }

.circle1 {
        position: absolute;
        left: -100px;
    width:100px;
    height:100px;
    border-radius: 180px;
    font-family:"Segoe UI";
    font-size: 12px;
    text-align:center;
    vertical-align:middle;
    background-color:#30EB0B;
}   
    .circle2 {
        position: absolute;
        left: -100px;
    width:100px;
    height:100px;
    border-radius: 180px;
    font-family:"Segoe UI";
    font-size: 12px;
    text-align:center;
    vertical-align:middle;
    background-color:#30EB0B;
}
.circle3 {
        position: absolute;
        left: -100px;
    width:100px;
    height:100px;
    border-radius: 180px;
    font-family:"Segoe UI";
    font-size: 12px;
    text-align:center;
    vertical-align:middle;
    background-color:#30EB0B;
}

或者是否有更简单的解决方案/插件可以为我做到这一点？

如果有人能帮我解决这个问题，我将不胜感激。谢谢

Answer 1

我在谷歌搜索后找到了与您提到的 Fiddle 相关的原始 stackoverflow。代码在那里被注释:

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);
});

这对你有帮助吗？