如何使用css，javascript创建圈子？ [英] How to create circles around a circle with css, javascript?
问题描述
我想创建一个由其他圈子包围的圈子（没有任何动画），例如：
I would like to create a circle (without any animation) which is surrounded by other circles, like this:
但我想建一个phonegap应用程序，所以我不想
but i would like to build in a phonegap app, so i don't want to increase the file size to big.
有人知道插件/方法或任何其他解决方案？
somebody know a plugin/method or any other solution?
在互联网上搜索，但我发现的方法是增加我的文件的大小太大。
I searched on the internet, but the methods i found are increase the size of my files too big.
推荐答案
这个问题的方面。下面是一个完整的（虽然快速和脏的）网页，将使用html，css3和javascript在父圈的中心绘制6个完美间隔的圆圈;它使用纯javascript，所以不需要引用一个jquery库。您应该能够看到如何从代码中轻松提取方法以控制卫星圆圈的数量，它们距父节点中心，父节点和卫星半径，卫星偏移等的距离：
No one addressed the javascript aspect of this question. Below is a complete (albeit quick and dirty) web page that will draw 6 perfectly spaced circles around a parent circle's center using html, css3, and javascript; it uses pure javascript so no need to reference a jquery library. You should be able to see how you could easily extract methods from the code to control the number of satellite circles, their distance from the center of the parent, parent and satellite radii, satellite offset, etc:
<!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>
这篇关于如何使用css，javascript创建圈子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
