Bagaimana untuk melaksanakan putaran imej dengan jquery

Dalam pembangunan bahagian hadapan, memaparkan dan menyemak imbas imej adalah keperluan biasa. Kadang-kadang kita perlu memutar gambar untuk mencapai kesan paparan yang lebih baik. Dalam kes ini, kita boleh menggunakan perpustakaan jQuery untuk melaksanakan putaran imej dengan mudah. Berikut akan memperkenalkan secara terperinci cara menggunakan jQuery untuk melihat putaran imej.

1. Persediaan

Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam HTML dan pemalam "jquery.transform.js" untuk penggiliran imej. Anda boleh memuat turunnya dari laman web rasmi jQuery dan memperkenalkan dua skrip ke dalam HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jquery.transform.js"></script>

Pada masa yang sama, anda perlu menyediakan bekas yang mengandungi imej dalam HTML untuk memaparkan imej:

<div id="img-container">
  <img src="example.jpg">
</div>

2 Putar imej

Selepas kerja penyediaan selesai, anda boleh menggunakan jQuery untuk memutar imej. Dengan kod berikut, kita boleh memutarkan imej 90 darjah:

$("#img-container img").rotate(90);

Antaranya, $("#img-container img") memilih elemen imej untuk beroperasi dan .rotate(90) memutar imej 90 darjah mengikut arah jam. Begitu juga, kita juga boleh menggunakan .rotate(-90) untuk memutar imej 90 darjah lawan jam, dan operasi putaran boleh ditindih sepanjang masa.

3. Tetapkan pusat putaran

Secara lalai, pusat putaran imej terletak di penjuru kiri sebelah atas imej. Jika anda perlu menetapkan pusat putaran ke titik tengah imej, anda boleh melakukannya dengan menetapkan gaya CSS:

#img-container img {
  transform-origin: center center;
}

Dengan cara ini, titik tengah imej akan menjadi titik tengah daripada keseluruhan imej apabila berputar.

4. Peristiwa yang mengikat

Biasanya, kami mencetuskan operasi penggiliran imej dengan peristiwa yang mengikat. Sebagai contoh, anda boleh memutar imej dengan mengklik butang. Berikut ialah contoh mudah:

旋转图片
<div id="img-container">
  <img src="example.jpg">
</div>

<script>
  $("#rotate").click(function() {
    $(&quot;#img-container img&quot;).rotate(90);
  });
</script>

Selepas mengklik butang "Putar Imej", program akan memutarkan imej 90 darjah mengikut arah jam.

Ringkasan

Di atas ialah contoh kod ringkas menggunakan jQuery untuk melihat putaran imej. Dengan menggunakan kaedah rotate() jQuery, kami boleh melaksanakan fungsi putaran imej dengan mudah, dan boleh menambah berbilang operasi putaran untuk mencapai hasil yang lebih baik. Saya harap artikel ini dapat membantu pembangun yang perlu melaksanakan fungsi putaran imej.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan putaran imej dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!