Vorrei creare un cerchio (senza animazione) che è circondata da altri ambienti, come questo:Come creare cerchi attorno a un cerchio con css, javascript?
ma vorrei costruire in un'applicazione PhoneGap, in modo che io non voglio per aumentare la dimensione del file in grande.
qualcuno conosce un plug-in/metodo o qualsiasi altra soluzione?
Ho cercato su Internet, ma i metodi che ho trovato aumentano le dimensioni dei miei file troppo grandi.
Nessuno affrontato l'aspetto javascript di questa domanda. Sotto c'è una pagina web completa (anche se veloce e sporca) che disegnerà 6 cerchi perfettamente distanziati attorno al centro di un cerchio genitore usando html, css3 e javascript; usa puro javascript quindi non è necessario fare riferimento a una libreria jquery.Si dovrebbe essere in grado di vedere come si potrebbe facilmente estrarre metodi dal codice per controllare il numero di cerchi satelliti, la loro distanza dal centro dei raggi genitore, genitori e satellitari, compensato satellitare, ecc:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="parentdiv"></div>
<style type="text/css">
#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;
}
</style>
<script type="text/javascript">
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);
}
</script>
</body>
</html>
Mi è davvero piaciuta la vostra soluzione. Ho incorporato parte di questa logica in una libreria js leggera chiamata [Moon Map] (https://github.com/mitch-seymour/moonmap). Sentiti libero di contribuire se hai qualche idea in più! – foxygen
Utilizzando css puoi provare qualcosa del genere. ma usare il tag circle di HTML5 ti darà un risultato migliore.
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;
}
Per fare un cerchio, utilizzare border-radius: 50%. Quindi posizionare 6 circolare divs con position: absolute attorno alla circonferenza più grande.
Un po 'come questo: 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>
Grazie ragazzi :) –
Come qualcuno ha detto nei commenti, è necessario impostare border-radius:50% e poi, il posizionamento assoluto. Ho fatto un jsfiddle fittizio per illustrare 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;
}
Aggiunta border-radius: 50% ad un <div> che ha una parità con l'altezza e poi mettere un background-color su di esso farà un cerchio di CSS (carico leggero).
.big_circle {
width:10em;
height:10em;
border-radius:50%;
background-color:blue;
}
È quindi possibile posizionare il cerchio direttamente al centro dello schermo utilizzando la posizione: trucco margine assoluto e negativo.
.big_circle {
width:10em;
height:10em;
border-radius:50%;
background-color:blue;
position:absolute;
top:50%;
left:50%;
margin-left:-5em;
margin-top:-5em;
}
Creare una classe per prendersi cura dello stile per i cerchi più piccoli.
.little_circle {
width:3em;
height:3em;
border-radius:50%;
background-color:green;
position:relative;
}
Poi aggiungere ID (o qualsiasi altro modo di identificarli) per posizionare relativamente rispetto al grande cerchio.
#little_one {
bottom:1em;
right:2em;
}
#little_two {
bottom:6.5em;
left:3.5em;
}
#little_three {
bottom:7em;
left:9em;
}
// etc...
forse provare svg? '' 'tag? –
bwoebi
Per creare una circonferenza, usa 'border-radius: 50%'. Quindi posizionare 6 div circolari con posizionamento assoluto attorno al cerchio più grande. – mash
@Mash: merita di essere una risposta. Fallo uno e avrai il mio voto. –