Question

我想创建一个圆圈（没有任何动画），这个圆圈被其他圆圈包围，如下所示：

my idea

但我想构建一个phonegap应用程序，所以我不想将文件大小增加到大。

有人知道插件/方法或任何其他解决方案吗？

我在互联网上搜索过，但我发现的方法会增加文件的大小。

Answer 1

没有人解决这个问题的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>

Answer 2

要制作一个圆圈，请使用border-radius: 50%。然后，只需将divs的圆形position: absolute放在较大的圆圈周围。

有点像这样：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>

Answer 3

使用css你可以尝试类似的东西。但是使用HTML5的圆形标签会给你一个更好的结果。

http://jsbin.com/etuzis/1/

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

.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;
}

Answer 4

将border-radius：50％添加到与{和1}相等且高度相等的<div>，然后在其上放置背景颜色将使CSS成为圆圈（轻载）。

.big_circle {
  width:10em;
  height:10em;
  border-radius:50%;
  background-color:blue;
}

然后，您可以使用位置：绝对和负边距技巧将圆圈直接放置在屏幕中间。

.big_circle {
  width:10em;
  height:10em;
  border-radius:50%;
  background-color:blue;

  position:absolute;
  top:50%;
  left:50%;
  margin-left:-5em;
  margin-top:-5em;
}

创建一个类来处理较小圆圈的样式。

.little_circle {
  width:3em;
  height:3em;
  border-radius:50%;
  background-color:green;
  position:relative;
}

然后添加ID（或任何其他识别方式）来定位相对于大圆圈的位置。

#little_one {
  bottom:1em;
  right:2em;
}

#little_two {
  bottom:6.5em;
  left:3.5em;
}

#little_three {
  bottom:7em;
  left:9em;
}

// etc...

Here's a CodePen with a sample.

Answer 5

有人在评论中说，你必须设置border-radius:50%，然后绝对定位。我为说明link做了一个虚拟的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;
}

如何用css，javascript创建一个圆圈？

5 个答案: