Question

我有一些较小的圆圈，目前围绕一个较大的圆圈旋转。问题是，它们都是一起旋转的。

我想知道是否有人可以帮助我制作它以便我可以根据小组轮换个人。我不能为我的生活弄清楚。

这是JSFiddle： http://jsfiddle.net/pTGAr/4/

这是jQuery：

jQuery(function($){

!jQuery.easing && (jQuery.easing = {});
!jQuery.easing.easeOutQuad && (jQuery.easing.easeOutQuad = function( p ) { return 1 - Math.pow( 1 - p, 2 ); });

var circleController = {
create: function( circle ){
  var obj = {
    angle: circle.data('angle'),
    element: circle,
    measure: $('<div />').css('width', 360 * 8 + parseFloat(circle.data('angle'))),
    update: circleController.update,
    reposition: circleController.reposition,
  };
  obj.reposition();
  return obj;
},
update: function( angle ){
  this.angle = angle;
  this.reposition();
},
reposition: function(){
  var radians = this.angle * Math.PI / 180, radius = 600 / 2;
  this.element.css({
    marginLeft: (Math.sin( radians ) * radius - 50) + 'px',
    marginTop: (Math.cos( radians ) * radius - 50) + 'px'
  });
}
};

var spin = {
circles: [],
left: function(){
  var self = this;
  $.each(this.circles, function(i, circle){
    circle.measure.stop(true, false).animate(
      { 'width': '-=45' },
      {
        easing: 'easeOutQuad',
        duration: 1000,
        step: function( now ){ circle.update( now ); }
      }
    );
  });
 },
right: function(){
  var self = this;
  $.each(this.circles, function(i, circle){
    circle.measure.stop(true, false).animate(
      { 'width': '+=45' },
      {
        easing: 'easeOutQuad',
        duration: 1000,
        step: function( now ){ circle.update( now ); }
      }
    );
  });
 },
prep: function( circles ){
  for ( var i=0, circle; i<circles.length; i++ ) {
    this.circles.push(circleController.create($(circles[i])));
  }
}
};

 var dataGroup;  

 $('#goL').click(function(){ spin.left() });
 $('#goR').click(function(){ spin.right() });

 $('#goLMovies').click(function(){ 

  dataGroup = "movies";
  spin.left(dataGroup) 
 });

$('#goLSomething').click(function(){ 

  dataGroup = "something";
  spin.left(dataGroup) 
 });

$('#goLAnimation').click(function(){ 

  dataGroup = "animation";
  spin.left(dataGroup) 
 });

spin.prep($('.circle'));

});

备受好评：）

Answer 1

如果你想使用像spin.left（dataGroup）这样的spin.left函数只影响那个数据组的圆圈，你需要在函数内部添加一个if并比较circle.element.data（“使用像这样的dataGroup分组“”

var dataGroup;  
$('#goL').click(function(){ spin.left() });//spin.left all circles 
$('#goLMovies').click(function(){ 
  dataGroup = "movies";
  spin.left(dataGroup);//spin.left only movies
});    
var spin = {
    circles: [],
    left: function(group){
        var self = this;
        $.each(this.circles, function(i, circle){
            //if the circle.element data group is equal to "movies" 
            //or the dataGroup is equal to ""==all circles
            if(circle.element.data("group")==group||group==""){
                circle.measure.stop(true, false).animate(
                  { 'width': '-=45' },
                  {
                    easing: 'easeOutQuad',
                    duration: 1000,
                    step: function( now ){ circle.update( now ); }
                  }
                );
            }          
        });
    }
...
}

http://jsfiddle.net/pTGAr/5/

分别围绕圆圈旋转组

1 个答案: