我试图在圆周围排列一个点。但我得到越野车的结果。某些角度(顶部和底部)未正确定位。这是什么问题?

该如何解决呢?



$(function(){

  var globe = $('#center');
  var width = globe.width() / 2 ;
  var height = globe.height() / 2;
  var point = $('.point').width();
  var pointer = $('<div />', {class:'test'});


  for(var i = 1; i <=  360; i++) {

    pointer.clone().css({
      left: width  + (width) * Math.cos(i * Math.PI / 180),
      top: height  + (height + point) * Math.sin(i * Math.PI / 180)
    }).appendTo('#center');

  }


});

#center {
    width:300px;
    height:300px;
    border-radius:50%;
    border:1px solid red;
    position:relative;
    left:200px;
    top:100px;
}

.test {

  width:0.1em;
  height:0.1em;
  background:gray;
  position:absolute;
  border-radius:50%;

}

.point {
  width:0.5em;
  height:0.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="center"></div>
<div class="point"></div>

最佳答案

更换:

  top: height  + (height + point) * Math.sin(i * Math.PI / 180)


带有:

  top: height  + (height) * Math.sin(i * Math.PI / 180)

关于jquery - 使用JavaScript buggy 在圆点周围排列点,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33168164/

10-10 05:36