我试图在圆周围排列一个点。但我得到越野车的结果。某些角度(顶部和底部)未正确定位。这是什么问题?
该如何解决呢?
$(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/