如何用css，javascript围绕一个圆圈创建圆圈？答案

【问题标题】：How to create circles around a circle with css, javascript?如何用css，javascript围绕一个圆圈创建圆圈？
【发布时间】：2022-03-02 14:20:34
【问题描述】：

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

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

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

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

【问题讨论】：

也许可以试试 svg？ <circle> 标签？
要创建一个圆圈，请使用border-radius: 50%。然后只需在较大的圆圈周围放置 6 个绝对定位的圆形 div。
@Mash - 这应该是一个答案。让它成为一个，你就会有我的投票。
我想找到一种“动态”的方式，而不是定位6圈。我会寻找标签。
什么是“动态”方式？只需创建圆形 HTML 元素并将它们放置在您想要的位置似乎很容易。这是FIDDLE

标签： javascript jquery html css

【解决方案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>

【讨论】：

我真的很喜欢你的解决方案。我将其中的一些逻辑合并到一个名为 Moon Map 的轻量级 js 库中。如果您有任何其他想法，请随时贡献！
这两个，答案，还有你创建的插件，foxygen，真的很棒！遗憾的是，让这类图表具有响应性、缩放等功能可能非常困难。

【解决方案2】：

要画一个圆圈，请使用border-radius: 50%。然后将 6 个圆形 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>

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案4】：

将border-radius:50% 添加到具有等于和高度的<div>，然后在其上添加背景颜色将在CSS 中形成一个圆圈（轻负载）。

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

然后，您可以使用 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;
}

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

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

【讨论】：

【解决方案5】：

正如有人在 cmets 中所说，您必须设置 border-radius:50% 然后，绝对定位。我制作了一个虚拟 jsfiddle 来说明 link:

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

【讨论】：

【解决方案6】：

要显示项目的径向阵列，请将它们居中并使用三角函数围绕中心旋转它们。这假设所有项目共享相同的宽度和高度。

关于这种方法的注意事项：

多个径向线可以在各种配置中重用 JS 函数
应该只有一个.radial_center（尽管可以更新代码以允许多层中心，取最大的直径进行计算）
可以有多个.radial_edge项，功能自动调整旋转角度
调整三角函数和系数，使第一个边始终位于顶部
.radial 包装器中的 data 字段可以手动设置 center 和 edge 项目的直径，以及它们之间的百分比 gap，它计算边缘项目从中心项目的半径
可以隐藏中心项目以创建“仅环”效果，但中心仍需要存在

是的，任何用 jQuery 或任何其他 lib 编写的代码都可以用 vanilla（或 asm 或二进制）重写。我只是为了自己的方便而使用 jQuery :)

const ns = {
  radial: (r) => {
    //capture radial edges
    let el = $(r),
      e = el.children('.radial_edge');

    //avoid div zero
    if (e.length) {
      //calc orbital angle and radius
      let c = el.children('.radial_center'),
        sa = -360 / e.length, //-360 rotates clockwise, 360 rotates counter
        i = 0, //0 sets first child at top
        cw = el.data('center') || c.width() || 100,
        ew = el.data('edge'),
        gap = el.data('gap') || .2;

      //calc x,y and reposition each edge
      e.each(function() {
        let re = $(this),
          ewa = ew || re.width() || 50,
          rad = (cw + ewa) * (1 + gap),
          x = Math.cos((sa * i) * (Math.PI / 180)) * rad * -1, //-1 flips vertically
          y = Math.sin((sa * i) * (Math.PI / 180)) * rad * -1;
        re.css({
          inset: x + 'px 0 0 ' + y + 'px'
        });
        i++;
      });
    }
  }
}

$(document).ready(() => {
  //parse each radial group
  $('.radial').each(function() {
    ns.radial(this);
  });
});

:root {
  /* decorative */
  --bs: 1px 1px 3px 0px grey;
  --b-soft: thin solid silver;
  font-family: monospace;
  color: gray;
}

img {
  display: block;
}

.hidden {
  display: none;
}

.examples {
  display: flex;
  flex-wrap: wrap;
}

.radial {
  /* required */
  position: relative;
  /* dev only */
  margin: 1em auto;
  border: 1px solid lightgray;
  width: 350px;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

.radial_center {
  /* required */
  width: fit-content;
  aspect-ratio: 1/1;
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  /* decorative */
  border-radius: 50%;
  box-shadow: var(--bs);
  border: var(--b-soft);
}

.radial_edge {
  /* required */
  position: absolute;
  width: 50px;
  aspect-ratio: 1/1;
  margin: auto;
  /* decorative */
  border-radius: 50%;
  box-shadow: var(--bs);
  border: var(--b-soft);
  opacity: .7;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  font-size: 2em;
}

.bigger .radial_center {
  width: 150px;
}

.bigger .radial_edge {
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="examples">
  <div class="radial" data-gap=".3">
    <img class="radial_center" src="https://picsum.photos/100" alt="center image" />
    <div class="radial_edge">1</div>
    <div class="radial_edge">2</div>
    <div class="radial_edge">3</div>
    <div class="radial_edge">4</div>
    <div class="radial_edge">5</div>
  </div>

  <div class="radial bigger" data-gap=".05">
    <img class="radial_center" src="https://picsum.photos/150" alt="center image" />
    <img class="radial_edge" src="https://picsum.photos/100" alt="satellite image" />
    <img class="radial_edge" src="https://picsum.photos/100" alt="satellite image" />
    <img class="radial_edge" src="https://picsum.photos/100" alt="satellite image" />
  </div>

  <div class="radial" data-center="75" data-edge="75">
    <div class="radial_center hidden"></div>
    <div class="radial_edge">1</div>
    <img class="radial_edge" src="https://picsum.photos/50" alt="satellite image" data-pos="1" />
    <div class="radial_edge">3</div>
    <img class="radial_edge" src="https://picsum.photos/50" alt="satellite image" data-pos="2" />
    <div class="radial_edge">5</div>
    <img class="radial_edge" src="https://picsum.photos/50" alt="satellite image" data-pos="3" />
  </div>
</div>

【讨论】：