Bagaimana untuk Menyusun Ikon dalam Bulatan Menggunakan CSS dan JavaScript?

Letakkan Ikon ke Bulatan dengan CSS dan JavaScript

Ikhtisar

Mencapai kesan yang diingini untuk meletakkan berbilang imej dalam bulatan memerlukan kedua-dua CSS dan JavaScript.

CSS untuk Kedudukan

Untuk meletakkan imej dalam bulatan, Transformasi CSS adalah perlu. Setiap imej hendaklah diletakkan di tengah-tengah elemen yang mengandungi dan kemudian diterjemahkan sepanjang paksi-X dengan separuh lebar bekas. Kod berikut menunjukkan CSS yang diperlukan:

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

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

JavaScript untuk Pengedaran

Semasa CSS meletakkan imej, JavaScript digunakan untuk mengedarkannya secara sama rata di sekeliling bulatan. Ini melibatkan pengiraan sudut antara setiap imej dan memutarkannya dengan sewajarnya. Kod berikut menunjukkan perkara ini:

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

Kesimpulan

Dengan menggabungkan CSS untuk kedudukan dan JavaScript untuk pengedaran, anda boleh meletakkan beberapa imej ke dalam bulatan dengan berkesan dan mengekalkan fungsi boleh kliknya.

Atas ialah kandungan terperinci Bagaimana untuk Menyusun Ikon dalam Bulatan Menggunakan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!