Bagaimanakah saya boleh memutarkan berbilang objek dalam bulatan dengan cekap menggunakan CSS dan jQuery?

Memutar Pelbagai Objek dalam Bulatan Menggunakan CSS: Panduan Komprehensif

Dalam artikel ini, kami meneroka cabaran memutar berbilang objek dalam corak bulat menggunakan CSS. Kami akan menyelidiki butiran pelaksanaan dan membentangkan penyelesaian Jquery yang mantap yang boleh mengendalikan sebarang bilangan item luar.

Memahami Mekanisme Putaran

CSS menyediakan sifat transformasi, yang membolehkan kita menggunakan pelbagai transformasi pada elemen, termasuk putaran. Fungsi rotateZ(sudut) memutarkan elemen di sekeliling paksi-Z, mewujudkan gerakan bulat yang diingini.

Demo dan Pelaksanaan

Untuk menggambarkan konsep, kami akan menggunakan kod HTML dan CSS berikut:

<div class="outCircle">
  <div class="rotate">
    <div class="inner">hello</div>
  </div>
</div>

.outCircle {
  width: 200px;
  height: 200px;
  left: 270px;
  position: absolute;
  top: 50px;
  border-radius: 100px;
}
.rotate {
  width: 100%;
  height: 100%;
  -webkit-animation: circle 10s infinite linear;
}
.inner {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50px;
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: red;
  display: block;
}
@-webkit-keyframes circle {
  from {
    -webkit-transform: rotateZ(0deg)
  }
  to {
    -webkit-transform: rotateZ(360deg)
  }
}

Kod ini berjaya memutarkan satu objek dalam bulatan. Walau bagaimanapun, memanjangkannya untuk memutar berbilang objek boleh menjadi rumit.

Penyelesaian Jquery untuk Putaran Dinamik

Kunci untuk memutar berbilang objek ialah mengira kedudukannya di sekeliling bulatan dan mengaplikasikan transformasi yang sesuai. Penyelesaian Jquery berikut dengan elegan mengendalikan masalah ini:

var radius = 100;
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);
  $(this).css({
    left: x + 'px',
    top: y + 'px'
  });
  angle += step;
});

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

Ciri Utama Penyelesaian:

• Kedudukan dinamik: Skrip Jquery mengira dan mengemas kini kedudukan semua objek berdasarkan jejari dan bilangan item.
• Bilangan item sewenang-wenangnya: Ia mengendalikan sebarang bilangan item luar dengan melaraskan jarak sudut di antaranya secara dinamik.
• Penjajaran tepat: Skrip memastikan bahawa semua item diselaraskan dengan sempurna pada a bulatan.
• Penyesuaian: Jejari dan kelajuan putaran boleh dilaraskan dengan mudah untuk memenuhi keperluan yang berbeza.

Kesimpulan

Semasa memutar berbilang objek dalam bulatan menggunakan CSS boleh mencabar pada mulanya, penyelesaian Jquery yang dibentangkan dalam artikel ini menyediakan pendekatan yang mantap dan serba boleh. Ia memberi kuasa kepada pembangun untuk mencipta animasi bulatan yang menarik perhatian dengan hanya beberapa baris kod.

Atas ialah kandungan terperinci Bagaimanakah saya boleh memutarkan berbilang objek dalam bulatan dengan cekap menggunakan CSS dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!