Bagaimana untuk Memutar Berbilang Objek Di Sekitar Bulatan Menggunakan CSS dan jQuery?

Putar Berbilang Objek Mengelilingi Bulatan Menggunakan CSS

Semasa memutar objek tunggal di sekeliling bulatan boleh dicapai dengan CSS, cabaran timbul apabila anda ingin memutar berbilang objek serentak. Berikut ialah penyelesaian terperinci yang akan membimbing anda melalui proses ini:

Penyelesaian itu menggunakan jQuery, iaitu perpustakaan JavaScript yang berkuasa yang memudahkan manipulasi dan animasi DOM. Ia membolehkan anda memutar berbilang objek di sekeliling bulatan tanpa mengira bilangannya.

var radius = 100; // adjust to move out items in and out 
var fields = $('.item'),
  container = $('#container'),
  width = container.width(),
  height = container.height();
var angle = 0,
  step = (2 * Math.PI) / fields.length;
fields.each(function() {
  var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
  var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
  if (window.console) {
    console.log($(this).text(), x, y);
  }
  $(this).css({
    left: x + 'px',
    top: y + 'px'
  });
  angle += step;
});

Kod jQuery ini mengira kedudukan setiap objek berdasarkan jejari bulatan dan bilangan objek. Ia menetapkan kedudukan kiri dan atas setiap objek untuk menjajarkannya di sekeliling perimeter bulatan.

Untuk melengkapkan animasi, anda boleh menambah peraturan CSS berikut:

body {
  padding: 2em;
}
#container {
  width: 200px;
  height: 200px;
  margin: 10px auto;
  border: 1px solid #000;
  position: relative;
  border-radius: 50%;
  animation: spin 10s linear infinite;
}
.item {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  background: #f00;
  animation: spin 10s linear infinite reverse;
}
@keyframes spin {
  100% {
    transform: rotate(1turn);
  }
}

Peraturan ini cipta bekas dengan sempadan bulat, dan setiap objek berputar mengelilingi bekas dalam arah yang bertentangan. Dengan melaraskan pembolehubah jejari, anda boleh mengawal jarak objek dari tengah bulatan.

Dengan menggabungkan jQuery dan CSS, anda boleh dengan mudah memutar berbilang objek di sekeliling bulatan menggunakan CSS dan mencapai kesan animasi yang diingini .

Atas ialah kandungan terperinci Bagaimana untuk Memutar Berbilang Objek Di Sekitar Bulatan Menggunakan CSS dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!