Wie ordne ich Symbole mithilfe von CSS und JavaScript in einem Kreis an?

Symbole mit CSS und JavaScript im Kreis positionieren

Übersicht

Um den gewünschten Effekt der Positionierung mehrerer Bilder in einem Kreis zu erzielen, sind sowohl CSS als auch JavaScript erforderlich.

CSS zur Positionierung

Um die Bilder in einem Kreis zu positionieren, sind CSS-Transformationen notwendig. Jedes Bild sollte in der Mitte des enthaltenden Elements platziert und dann entlang der X-Achse um die halbe Breite des Containers verschoben werden. Der folgende Code demonstriert das erforderliche CSS:

.container {
  width: 24em;
  height: 24em;
  position: relative;
}

.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript für die Verteilung

Während CSS die Bilder positioniert, wird JavaScript verwendet, um sie gleichmäßig im Kreis zu verteilen. Dabei wird der Winkel zwischen den einzelnen Bildern berechnet und entsprechend gedreht. Der folgende Code demonstriert dies:

const container = document.querySelector('.container');
const icons = document.querySelectorAll('.icon');

const containerWidth = container.getBoundingClientRect().width;
const containerHeight = container.getBoundingClientRect().height;
const iconWidth = icons[0].getBoundingClientRect().width;
const iconHeight = icons[0].getBoundingClientRect().height;

icons.forEach((icon, index) => {
  const angle = (Math.PI * 2) / icons.length;
  const transformString = `rotate(${angle * index}rad) translate(${containerWidth / 2 - iconWidth / 2}px, ${containerHeight / 2 - iconHeight / 2}px)`;
  icon.style.transform = transformString;
});

Fazit

Durch die Kombination von CSS für die Positionierung und JavaScript für die Verteilung können Sie mehrere Bilder effektiv in einem Kreis platzieren und ihre anklickbare Funktionalität beibehalten.

Das obige ist der detaillierte Inhalt vonWie ordne ich Symbole mithilfe von CSS und JavaScript in einem Kreis an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!