jQuery，获取圆周元素的位置

Question

我正在努力让 div 围绕一个圆圈旋转。我一直在研究我不久前发现的 JSFiddle，它似乎几乎是我想要的:

http://jsfiddle.net/c7b6H/

但我似乎无法获得我想要的效果。如果单击向右移动按钮，您将看到图像平滑地旋转到右侧的位置。这很好，但是当我单击“向左转”链接时，它们似乎跳到左侧并重新开始。

如何获取 div 的位置，然后让它们滚动到圆圈周围的特定位置。例如，如果我点击向右走，他们会做他们现在做的事情，如果我再次点击它，他们会向右走得更远，而不是从头开始。

代码如下:

var t, delta, finish;

window.goLight = function() {
    $('.circle').removeClass('right').attr("style", "");
    t = [-Math.PI, -Math.PI, -Math.PI],
    delta = [0.07, 0.055, 0.04],
    finish = [-0.5, -1.0, -1.5];
    moveit(0);
    moveit(1);
    moveit(2);
}

window.goLeft = function() {
    $('.circle').addClass('right').attr("style", "");
    t = [0,0,0],
    delta = [-0.07, -0.055, -0.04],
    finish = [-Math.PI+0.5, -Math.PI+1.0, -Math.PI+1.5];
    moveit(0);
    moveit(1);
   moveit(2);
}

function moveit(i) {
    var r = 300; // radius

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

    $('div.circle'+(i+1)).animate({
       top: newTop,
       left: newLeft,
    },1, function() {
       t[i] += delta[i];
       if (delta[i] < 0) {
      if (t[i] > finish[i]) moveit(i);
    } else {
      if (t[i] < finish[i]) moveit(i);
    }
});
}

Answer 1

jQuery 的不同版本

概览

这是您所要求的示例，我重写了该方法，但是因为我发现使用 Angular 偏移更直接且更易于修改。这个版本可以通过多种不同的方式进行改进，但这只是给你一个想法。它通过将隐藏的非事件元素上的 jQuery 线性 width 动画转换为 margin-left 和 margin-top 值来工作的 step函数 — 而不是使用必须通过 Math.PI 计算绕过所有内容的复杂缓动函数。

fiddle

http://jsfiddle.net/nf7kA/

边距？

我使用 margin 进行定位的原因是 left 和 top 可以保留，以确保较小圆圈的中心热点始终在大圆的死点。这可以通过多种不同的方式实现，但这完全取决于您喜欢什么，即使用单独的包装层来抵消小圆圈，或者改为依赖 css 翻译。

每个圆圈都有一个度量对象

通过将每个动画独立于它自己的圆圈，这应该意味着您可以以不同的速度和偏移量为它们制作动画，但是您真的很喜欢。基本上每个圆圈都有一个 measure 对象。这只是一个隐藏的 div，jQuery 为其“想象的”宽度设置动画。然后通过将 width 值视为 Angular (以度为单位)将动画转换为二维坐标，将其转换为弧度，然后使用 Math.cos 和 Math .sin.

扩展标记

系统从 data-angle 属性中读入圆的起始 Angular ，这意味着在不同的偏移量处添加和删除圆应该非常容易，即使您愿意，也可以动态地添加和删除圆(尽管您必须更新 spin.circles 数组)。如果你想让特定的圆比它们的对应物移动得更快，你也可以通过添加 data-duration 属性来扩展这个想法，或者如果你需要不同的 data-radius 属性大小的圆圈。

无论如何，这只是一个可以通过多种不同方式扩展的想法。

要小心

此版本需要注意的一点是，只要您将隐藏 div 的 width 值保持在零以上，它就可以完美运行。当您开始使用负值设置动画时，显然事情变得有点奇怪。这就是将起始宽度定义为 8 x 360 的原因。这样向前或向后都可以正常工作，直到你绕着圆圈向后走 8 次以上。如果这是一个真正的问题，那么有很多解决方案。最简单的方法是增加乘数，其他选项是找到一个 css 属性，jQuery 可以开箱即用地以正或负正确设置动画...我试过 z- index 和 line-height 但两者都有奇怪的结果。

JavaScript

jQuery(function($){

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

  /// the object the controls each individual circle
  var circleController = {
    create: function( circle ){
      var angle = parseFloat(circle.data('angle'));
      var obj = {
        angle: angle,
        element: circle,
        measure: $('<div />').css('width', 360 * 8 + 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'
      });
    }
  };

  /// the overall manager that keeps track of each circle
  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])));
      }
    }
  };

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

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

});

CSS

.maincircle {
  position: absolute;
  height: 600px;
  left:50%;
  margin-left:-300px;
}

.inner {
  position: relative;
  width:600px;
  height:600px;
  border-radius: 50%;
  background-color:#02E3E7;
}

.circle {
  position: absolute;
  width:100px;
  height:100px;
  border-radius: 50%;
  font-family: "Segoe UI", tahoma, sans-serif;
  font-size: 12px;
  text-align:center;
  vertical-align:middle;
  background-color: white;
  box-shadow: 0px 0px 10px 10px teal;
  margin-top: -50px;
  margin-left: -50px;
  left: 50%;
  top: 50%;
  line-height: 100px;
}

html

<a id="goL" href="javascript:void(0);">Go Left</a>
<a id="goR" href="javascript:void(0);">Go Right</a>

<div class="maincircle">
    <div class="inner">
        <div class="circle1 circle" data-angle="0">Movies</div>
        <div class="circle2 circle" data-angle="45">Animation</div>
        <div class="circle3 circle" data-angle="90">Something?</div>
    </div>
</div>