如何使用 css、javascript 在圆圈周围创建圆圈？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16613809/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create circles around a circle with css, javascript?
提问by Gábor
I would like to create a circle (without any animation) which is surrounded by other circles, like this:
我想创建一个被其他圆圈包围的圆圈（没有任何动画），如下所示：
but i would like to build in a phonegap app, so i don't want to increase the file size to big.
但我想构建一个 phonegap 应用程序，所以我不想将文件大小增加到很大。
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.
我在互联网上搜索，但我发现的方法是将文件的大小增加得太大。
回答by joelmdev
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:
没有人解决这个问题的 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>回答by mash
To make a circle, use border-radius: 50%. Then just position 6 circular divswith position: absolutearound the larger circle.
要制作圆圈，请使用border-radius: 50%。然后，只需位置6的圆形divs与position: absolute周围较大的圆。
Kind of like this: http://jsfiddle.net/yxVkk/
有点像这样：http: //jsfiddle.net/yxVkk/
<div id="big-circle" class="circle big">
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="circle four"></div>
<div class="circle five"></div>
<div class="circle six"></div>
</div>
<style>
.circle {
border-radius: 50%;
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
position: absolute;
}
.circle.big {
width: 150px;
height: 150px;
background-color: blue;
margin: 100px;
}
.one {
left: -25px;
top: -25px;
}
.two {
top: -60px;
left: 50px;
}
.three {
right: -25px;
top: -25px;
}
.four {
left: -25px;
bottom: -25px;
}
.five {
bottom: -60px;
left: 50px;
}
.six {
right: -25px;
bottom: -25px;
}
</style>
回答by Arpit
Using css you can try something like that. but use circle tag of HTML5 will give you a better result.
使用 css 你可以尝试类似的东西。但是使用 HTML5 的 circle 标签会给你一个更好的结果。
HTML
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class=div2 style='top:12px; left:45px;'></div>
<div class=div2 style='top:4px; left:160px;'></div>
<div class=div2 style='top:94px; left:210px;'></div>
<div class=div1></div>
</body>
</html>
CSS
CSS
.div1{
margin:40px 10px 10px 50px;
position:relative;
width:150px;
height:150px;
background-color:#ac5;
border-radius:100px;
}
.div2{
position:absolute;
width:40px;
height:40px;
background-color:#ac5;
border-radius:100px;
}
回答by Jason
Adding border-radius:50% to a <div>that has an equal with and height then putting a background-color on it will make a circle out of CSS (light load).
将 border-radius:50% 添加到<div>与高度相等的a 上，然后在其上放置背景颜色将使 CSS 变成一个圆（轻负载）。
.big_circle {
width:10em;
height:10em;
border-radius:50%;
background-color:blue;
}
You can then absolutely position the circle directly in the middle of the screen by using the position:absolute and negative margin trick.
然后，您可以使用 position:absolute 和负边距技巧将圆圈直接绝对定位在屏幕中间。
.big_circle {
width:10em;
height:10em;
border-radius:50%;
background-color:blue;
position:absolute;
top:50%;
left:50%;
margin-left:-5em;
margin-top:-5em;
}
Create a class to take care of the styling for the smaller circles.
创建一个类来处理较小圆圈的样式。
.little_circle {
width:3em;
height:3em;
border-radius:50%;
background-color:green;
position:relative;
}
Then add IDs (or any other way of identifying them) to position the relatively compared to the big circle.
然后添加 ID（或任何其他识别它们的方式）以相对于大圆圈定位。
#little_one {
bottom:1em;
right:2em;
}
#little_two {
bottom:6.5em;
left:3.5em;
}
#little_three {
bottom:7em;
left:9em;
}
// etc...
回答by mario595
As somebody said in the comments, you have to set border-radius:50%and then, positioning absolutely. I've made a dummy jsfiddle for illustrate link:
正如有人在评论中所说的那样，您必须设置border-radius:50%然后绝对定位。我制作了一个虚拟的 jsfiddle 用于说明链接：
circle{
width : 50px;
height : 50px;
border-radius : 50%;
background: red;
position : absolute;
top : 50px;
left : 150px;
}
.small_circle_1{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : -25px;
left : 15px;
}
.small_circle_2{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : 15px;
left : -25px;
}
.small_circle_3{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : 55px;
left : 15px;
}
.small_circle_4{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : 15px;
left : 55px;
}
