Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik?

Buat interaksi web yang sejuk: Klik pada gambar, dan gambar sekitarnya menyebar dan membesarkan!

Banyak laman web menggunakan interaksi yang menarik ini: klik pada imej dan ia akan membesarkan, sementara imej sekitarnya akan tersebar. Artikel ini akan menerangkan secara terperinci bagaimana untuk mencapai kesan ini menggunakan CSS3 dan JavaScript.

Pertama, kita perlu menambah pendengar acara klik untuk setiap imej. Apabila pengguna mengklik pada imej, kod JavaScript dijalankan, mengubah saiz kedudukan dan saiz semua imej. Kuncinya adalah menggunakan atribut transform CSS3 untuk mencapai anjakan dan penskalaan gambar.

Langkah -langkahnya adalah seperti berikut:

1. Struktur HTML: untuk masing -masing <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174312337946553.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik? "> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174312337917621.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik? "> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174312338030325.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik? "> 2. Kod JavaScript: Fungsi spread() menerima elemen imej yang diklik sebagai parameter dan mengira nisbah anjakan dan skala imej lain:

 penyebaran fungsi (img) {
  const images = document.getElementsByTagName ('img');
  const index = array.prototype.indexof.call (imej, img);
  untuk (biarkan i = 0; i <image.length i const jarak="math.sqrt" index kirakan angle="(i" math.pi hitung sudut x="100" math.cos anjakan y="100" math.sin dellacement scale="i" indeks imej diperbesar dengan mengklik lain tetap tidak berubah .style.transform="`translate" px skala><p> Dalam kod ini, fungsi <code>Math.sin</code> dan <code>Math.cos</code> mengira anjakan imej, <code>100</code> mengawal radius penyebaran, dan mengawal nisbah <code>scale</code> . Imej yang diklik mempunyai skala 2, dan imej lain tetap seperti yang mereka ada.</p>
<p> <strong>3. Gaya CSS:</strong> Tetapkan kedudukan awal, saiz dan kesan peralihan gambar:</p>
<pre class="brush:php;toolbar:false"> img {
  Kedudukan: Mutlak;
  Kiri: 50%;
  Atas: 50%;
  Transform: Terjemahan (-50%, -50%) skala (1);
  Peralihan: Mengubah 0.5s mudah-dalam-keluar;
  /* Tambahkan gaya lain, seperti saiz gambar*/
  lebar: 100px;
  Ketinggian: 100px;
}

position: absolute membolehkan imej menjadi benar -benar diposisikan, translate(-50%, -50%) memusatkan imej, dan atribut transition membolehkan proses transformasi imej untuk peralihan lancar.

Melalui langkah -langkah di atas, anda boleh mencapai kesan penyebaran gambar -gambar di sekelilingnya dan membesarkannya dengan sendirinya selepas mengkliknya. Anda boleh menyempurnakan kesan dengan menyesuaikan parameter dalam kod anda (seperti menyebarkan radius, skala, masa peralihan) dan menambah lebih banyak butiran animasi atau interaksi untuk meningkatkan pengalaman pengguna. Ingatlah untuk menggantikan "image1.jpg" , "image2.jpg" dan "image3.jpg" sebagai laluan imej sebenar anda.

Atas ialah kandungan terperinci Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!