圍繞父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演示

Answer 1

我仔細閱讀了您的代碼，並感到以下疑問：

1. 為什么在容器類中使用填充？ -我想這會使孩子們的圈子大於父母圈子。 如果將360度除以子級數（6），則子級圓可以與父級圓的高度和寬度相同。
2. 為什么var offsetToChildCenter = 20 ;？ -如果容器類的屬性為“高度：150像素；寬度：150像素；”，那么我想您可以將此行更改為
3. 為什么要減去offsetToChildCenter到offsetToParentCenter（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。