Question

我需要将这5个元素放在圆圈中。我的三角学知识太差，无法提出解决方案。

无论谁帮忙，请对数学公式给出一些解释，或者转发给我一个关于它的信息的链接。

我不需要jQuery解决方案，因为我想了解框架背后的内容。

感谢。

Answer 1

你几乎肯定需要CSS以这种精确度来定位div。

您正在寻找的通用公式是，对于圆上任何给定的弧度位置（圆圈中有2π弧度），x和y为：

x = originX + (Math.cos(radians) * radius);
y = originY + (Math.sin(radians) * radius);

示例：Live Copy | Live Source

CSS（我猜你可以使用内联样式）：

#target {
  position: absolute;
  border: 1px solid black;
  width: 1px;
  height: 1px;
}

HTML：

<input type="button" id="theButton" value="Start/Stop">
<div id="target"></div>

JavaScript的：

(function() {
  var radians, maxRadians, target, radius, originX, originY, inc, timer;

  radius = 50;
  originX = 100;
  originY = 100;

  radians = 0;
  maxRadians = 2 * Math.PI;
  inc = 10 / 360;
  target = document.getElementById("target");
  positionTarget();

  function positionTarget() {
    var x, y;

    x = originX + (Math.cos(radians) * radius);
    y = originY + (Math.sin(radians) * radius);
    console.log(x + "," + y);
    target.style.left = x + "px";
    target.style.top =  y + "px";
    radians += inc;
    if (radians > maxRadians) {
      radians -= maxRadians;
    }
    timer = setTimeout(positionTarget, 30);
  }

  document.getElementById("theButton").onclick = function() {
    if (timer) {
      clearTimeout(timer);
      timer = 0;
    }
    else {
      timer = setTimeout(positionTarget, 30);
    }
  };
})();

将DIV元素放在圆圈中

1 个答案: