Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

JSFiddle Demo

Answer 1

我已经完成了你的代码，我对此产生了怀疑：

为什么你在容器类中使用填充？ - 我想它会使子圆圈大于父圆圈。如果您将360度分割为子项数（6），则子圆可以与父圆的高度和宽度相同。
为什么var offsetToChildCenter = 20;？ - 如果容器类具有属性＆＃34; height：150px; 宽度：150px;＆＃34;，然后我想你可以将这一行改为 var offsetToChildCenter = 75
为什么要将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双格式（https://stackoverflow.com/a/9652699/7113404）中的舍入错误。

Answer 2

您父母div上的保证金似乎已关闭。此外，我可能会尝试将“parentdiv”作为容器的子项。如果它不是父母，则不是父母div。

围绕父div javascript问题的圈子

2 个答案: