关于html：围绕父div javascript问题的圈子


Circles around a parent div javascript issue

我试图在它周围有一个DIV和X数量的圆圈。在我创建的示例中…我想绕着它转6圈。它们都形成一个圆圈，但不是围绕着父分区。我做错了什么？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.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;
}

号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <input type="checkbox" id="test1">
 
    <label for="test1" class="inner">Test 1</label>
 
  <input type="checkbox" id="test2">
 
    <label for="test2" class="inner">Test 2</label>
 
  <input type="checkbox" id="test3">
 
    <label for="test3" class="inner">Test 3</label>
 
  <input type="checkbox" id="test4">
 
    <label for="test4" class="inner">Test 4</label>
 
  <input type="checkbox" id="test5">
 
    <label for="test5" class="inner">Test 5</label>
 
  <input type="checkbox" id="test6">
 
    <label for="test6" class="inner">Test 6</label>

JSfiddle演示

我已经看过你的密码，我有以下疑问：

  • 为什么在容器类中使用填充？-我想这会使孩子们的圈子比父母的圈子大。如果要将360度分割为子循环数(6)，子循环的高度和宽度可能与父循环的高度和宽度相同。
  • 为什么var offsettochildcenter=20；？-如果容器类具有属性"height:150px；宽度：150px；"，那么我想你可以把这行改为var offsettochildcenter=75
  • 为什么要从offsetToChildCenter减去offsetToChildCenter(var totaloffset=offsetToParentCenter-offsetToChildCenter；)？-在这一行中，我希望您可以更改为var totaloffset=offsettoparentcenter+offsettochildcenter；

    • 因此，随着这些更改，源代码将变为：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .container label {
      cursor: pointer;
      height: 150px;
      width: 150px;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      border-radius: 50%;
      background: green;
    }

    javascript：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    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)中的舍入错误造成的。

    您在父分区上的边距似乎已关闭。另外，我可能会尝试将"parentDiv"作为容器的子级。如果它无论如何都不是父级，则不是父级。