解决方法
没有人解决这个问题的
javascript方面.以下是一个完整的(虽然是快速和肮脏的)网页,将使用html,css3和javascript在父亲圈的中心绘制6个完美间隔的圈子;它使用纯
JavaScript,所以不需要引用一个jquery库.您应该可以看到如何轻松地从代码中提取方法来控制卫星圈数,距离父中心,父卫星半径,卫星偏移等距离：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="parentdiv"></div>
<style type="text/css">
#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;
}
</style>
<script type="text/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 = 20;
var totalOffset = offsetToParentCenter - offsettochildCenter;
for (var i = 1; i <= 6; ++i)
{
var childdiv = document.createElement('div');
childdiv.className = 'div2';
childdiv.style.position = 'absolute';
var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
childdiv.style.top = (y + totalOffset).toString() + "px";
childdiv.style.left = (x + totalOffset).toString() + "px";
parentdiv.appendChild(childdiv);
}
</script>
</body>
</html>
