Bildposition nach Bildzählung berechnen

Question

Es gibt einen Kreis und einige Objekte um sie herum. Die Objektnummer kann von 1 bis n (dynamisch) abweichen.

Wie kann ich alle diese Objekte automatisch um den Kreis legen?

Tnx im Voraus.

Answer 1

Hier ist ein Weg, es zu tun. Ich habe Kommentare im Code hinzugefügt, um die Schritte zu erklären. Ich habe mir die Freiheit genommen, nur farbige Divs anstelle von Bildern zu verwenden, aber der Effekt ist der gleiche.

// Editor to change the number of persons dynamically 
 
var nr = document.getElementById('nr'); 
 
nr.addEventListener('keyup', function(){updatePersons();}); 
 

 
// The globe 
 
var globe = document.getElementById('globe'); 
 

 
// A function to reinitialize the persons 
 
function updatePersons() { 
 
    var personCount = parseInt(nr.value); 
 
    
 
    globe.innerHTML = ''; // A bit dirty way to remove all previous peeps 
 
    
 
    // Just add them in a loop, and apply a transformation. 
 
    for (var i = 0; i < personCount; i++) { 
 
    var person = document.createElement('div'); 
 
    person.className = 'mens'; 
 
    var rotation = i * (360/personCount); 
 
    console.log(rotation); 
 
    person.style.transform = 'translate(125px, -100px) rotate(' + rotation + 'deg)'; 
 
    globe.appendChild(person); 
 
    } 
 
} 
 

 
// Initial positioning of persons. 
 
updatePersons();

#nr { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
.corea { 
 
    background-color: blue; 
 
    border-radius: 50%; 
 
    width: 300px; 
 
    height: 300px; 
 
    position: relative; 
 
} 
 

 
.mens { 
 
    position: absolute; /* Needed, otherwise they influence each other */ 
 
    width: 50px; 
 
    height: 100px; 
 
    background-color: red; 
 
    transform-origin: 25px 250px; 
 
    
 
    /* Transform is set in Javascript */ 
 
    x-transform: translate(125px, -100px) rotate(180deg); 
 
}

<input id="nr" value="5"> 
 
<div id="globe" class="corea"> 
 
</div>