admin管理员组

文章数量:1188795

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.

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.

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.

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.

  • javascript
  • jquery
  • html
  • css
Share Improve this question asked May 17, 2013 at 16:24 GáborGábor 8194 gold badges12 silver badges18 bronze badges 7
  • 4 perhaps try svg? <circle> tag? – bwoebi Commented May 17, 2013 at 16:26
  • 10 To make a circle, use border-radius: 50%. Then just position 6 circular divs with absolute positioning around the larger circle. – mash Commented May 17, 2013 at 16:27
  • 1 @Mash - That deserves to be an answer. Make it one and you'll have my vote. – Justin Morgan Commented May 17, 2013 at 16:31
  • I would like to find a "dynamic" way, not to position the 6 circle. I will look for the <circle> tag. – Gábor Commented May 17, 2013 at 16:33
  • 1 What is a "dynamic" way? just creating round HTML elements and placing them where you'd like them seems the easies. Here's a FIDDLE – adeneo Commented May 17, 2013 at 16:35
 |  Show 2 more comments

6 Answers 6

Reset to default 40

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:

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>

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

Kind of like this: 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>

To display a radial array of items, center them and use trigonometry to rotate them around the center. This assumes all the items share the same width and height.

Notes about this approach:

  • Multiple radials can reuse the JS function in a wide variety of configurations
  • There should only be one .radial_center (though the code could be updated to allow multiple layered centers, taking the diameter of the largest for calculations)
  • There can be multiple .radial_edge items, and the function automatically adjusts the angle of rotation
  • Trig functions and coefficients are adjusted so the first edge is always on top
  • data fields in the .radial wrapper can manually set diameters for the center and edge items, as well as the percentage gap between them, which calculates to the radius for the edge items from the center item
  • The center item can be hidden to create a "ring only" effect, though the center still needs to exist

Yes, any code written in jQuery or any other lib can be re-written in vanilla (or asm or binary). I just used jQuery for my own convenience :)

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>

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

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

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

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

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

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:

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

本文标签： jqueryHow to create circles around a circle with cssJavaScriptStack Overflow

版权声明：本文标题：jquery - How to create circles around a circle with css, javascript? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1737302142a1973267.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。