Menu
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.
349
To create a circle we can set the border-radius on the element. This will create curved corners on the element. If we set it to 50% it will create a circle. If you set a different width and height we will get an oval instead.
You don't have to create multiple circle tags. Simple use the use tag and transform its X-axis.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
