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

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.

我在互联网上搜索，但我发现的方法是我的文件太大了。

5 个解决方案

#1

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>

#2

To make a circle, use border-radius: 50%. Then just position 6 circular divs with position: absolute around the larger circle.

要制作圆，请使用border-radius：50％。然后只需放置6个圆形div，其位置为：绝对围绕较大的圆圈。

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>

#3

Using css you can try something like that. but use circle tag of HTML5 will give you a better result.

使用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;
}

#4

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％添加到具有等于和高度的

然后在其上放置背景颜色将使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.

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

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

Here's a CodePen with a sample.

这是一个带样本的CodePen。

#5

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

#1

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>

#2

To make a circle, use border-radius: 50%. Then just position 6 circular divs with position: absolute around the larger circle.

要制作圆，请使用border-radius：50％。然后只需放置6个圆形div，其位置为：绝对围绕较大的圆圈。

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>

#3

Using css you can try something like that. but use circle tag of HTML5 will give you a better result.

使用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;
}

#4

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％添加到具有等于和高度的

然后在其上放置背景颜色将使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.

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

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

Here's a CodePen with a sample.

这是一个带样本的CodePen。

#5

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

秒客网

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

5 个解决方案

#1

#2

#3

#4

#5

#1

#2

#3

#4

#5

相关文章