javascript - 围绕父 div javascript 问题的圆圈

Question

我试图让父 div 和它周围的 x 个圆圈。在我创建的示例中......我试图在它周围获得 6 个圆圈。它们都形成一个圆圈，但不围绕父 div。我做错了什么？

var div = 360 / 6;
var radius = 150;
var parentdiv = document.getElementById('parentdiv');
var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square
var offsetToChildCenter = 20;
var totalOffset = offsetToParentCenter - offsetToChildCenter;
var elementList = document.querySelectorAll(".circle");
for (var i = 0; i <= elementList.length; i++) {
  elementList[i].style.position = 'absolute';
  var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
  var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
  elementList[i].style.top = (y + totalOffset).toString() + "px";
  elementList[i].style.left = (x + totalOffset).toString() + "px";
}

.container label {
  cursor: pointer;
  height: 150px;
  width: 150px;
  display: table-cell;
  text-align: center;
  padding: 20px 10px 10px 20px;
  vertical-align: middle;
  border-radius: 50%;
  background: green;
}

.container input[type="checkbox"] {
  display: none;
}

#parentdiv {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: #ac5;
  border-radius: 150px;
  margin: 150px;
}

.div2 {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #ac5;
  border-radius: 100px;
}

<div id="parentdiv"></div>
<div class="container">
  <input type="checkbox" id="test1">
  <div class="circle">
    <label for="test1" class="inner">Test 1</label>
  </div>
  <input type="checkbox" id="test2">
  <div class="circle">
    <label for="test2" class="inner">Test 2</label>
  </div>
  <input type="checkbox" id="test3">
  <div class="circle">
    <label for="test3" class="inner">Test 3</label>
  </div>
  <input type="checkbox" id="test4">
  <div class="circle">
    <label for="test4" class="inner">Test 4</label>
  </div>
  <input type="checkbox" id="test5">
  <div class="circle">
    <label for="test5" class="inner">Test 5</label>
  </div>
  <input type="checkbox" id="test6">
  <div class="circle">
    <label for="test6" class="inner">Test 6</label>
  </div>
</div>

JSFiddle Demo

Answer 1

我看了你的代码，我有以下疑问:

1. 为什么要在容器类中使用填充？ - 我想这会使子圆比父圆大。如果将 360 度除以子级数 (6)，则子级圆圈的高度和宽度可以与父级圆圈的高度和宽度相同。
2. 为什么 var offsetToChildCenter = 20;? - 如果容器类具有属性“height: 150px; width: 150px;", 那么我想你可以将这一行更改为 var offsetToChildCenter = 75
3. 为什么要将 offsetToChildCenter 减去 offsetToParentCenter (var totalOffset = offsetToParentCenter - offsetToChildCenter;)？ - 在这一行中，我希望你可以更改为 var totalOffset = offsetToParentCenter + offsetToChildCenter;

因此，进行这些更改后，源代码将变为:

.container label {
  cursor: pointer;
  height: 150px;
  width: 150px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: green;
}

Javascript:

var div = 360 / 6;
var radius = 150;
var parentdiv = document.getElementById('parentdiv');
var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square
var offsetToChildCenter = 75;
var totalOffset = offsetToParentCenter + offsetToChildCenter;
var elementList = document.querySelectorAll(".circle");
for (var i = 0; i <= elementList.length; i++) {
  elementList[i].style.position = 'absolute';
  var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
  var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
  elementList[i].style.top = (y + totalOffset).toString() + "px";
  elementList[i].style.left = (x + totalOffset).toString() + "px";
}

至少，毕竟，子圆不会完全围绕父圆，这可能是由于 IEEE-754 double 格式 ( https://stackoverflow.com/a/9652699/7113404 ) 中的舍入错误。