我想创建一个被其他圆圈包围的圆圈(没有任何动画)，如下所示:
但我想构建一个 phonegap 应用程序，所以我不想将文件大小增加到很大。
有人知道插件/方法或任何其他解决方案吗？
我在互联网上搜索过，但我找到的方法是将我的文件的大小增加得太大。
最佳答案
没有人解决这个问题的 javascript 方面。下面是一个完整的(尽管快速和肮脏的)网页，它将使用 html、css3 和 javascript 在父圆的中心周围绘制 6 个完美间隔的圆；它使用纯 javascript，因此无需引用 jquery 库。您应该能够看到如何轻松地从代码中提取方法来控制卫星圈的数量、它们与父级圆心的距离、父级和卫星半径、卫星偏移等:
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);
}#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;
}<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="parentdiv"></div>
</body>
</html>关于javascript - 如何用css、javascript围绕一个圆圈创建圆圈？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16613809/