Bagaimana untuk memutar div menggunakan jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk memutar div menggunakan jquery

WBOY

Lepaskan： 2023-05-28 09:16:07

asal

682 orang telah melayarinya

Dengan pembangunan berterusan teknologi Web, kesan animasi memainkan peranan yang semakin penting dalam reka bentuk web. Antaranya, kesan putaran adalah kesan animasi yang sangat biasa dan menarik perhatian. Jadi, dalam artikel ini, kami akan memperkenalkan cara menggunakan jQuery untuk mencapai kesan putaran div yang mudah.

Idea asas menggunakan jQuery untuk mencapai kesan putaran div ialah menggunakan atribut transform dalam CSS3 untuk memutar elemen div dengan sudut tertentu di sepanjang paksi Y. Pada masa yang sama, kita perlu menentukan beberapa gaya CSS utama, seperti kelajuan putaran dan fungsi pelonggaran animasi. Kemudian, gunakan fungsi animate() dalam jQuery untuk menggunakan gaya CSS ini pada elemen div untuk mencapai animasi putaran div yang mudah.

Berikut ialah langkah pelaksanaan khusus:

Buat elemen div dan tentukan gaya asas

Pertama, kita perlu menambah div dalam elemen kod HTML. Elemen div ini akan digunakan oleh kami untuk menunjukkan kesan putaran. Di sini, kita mula-mula mentakrifkan elemen div dengan kelas "kotak" dan mentakrifkan beberapa gaya CSS asas untuknya:

<div class="box">Hello, World!</div>

<style>
.box {
   width: 200px;
   height: 200px;
   background-color: #f0f0f0;
   border-radius: 10px;
   text-align: center;
   line-height: 200px;
   font-weight: bold;
   font-size: 24px;
}
</style>

Salin selepas log masuk

Tentukan gaya putaran

Sejak apa yang kita mahu capai ialah kesan animasi putaran di sepanjang paksi Y, kita perlu menentukan gaya putaran. Di sini, kami mentakrifkan gaya CSS bernama "putar" untuk memutarkan elemen div 180 darjah di sepanjang paksi Y:

.rotate {
  transform: rotateY(180deg);
}

Salin selepas log masuk

Menggunakan jQuery untuk mencapai kesan animasi

Seterusnya, kita perlu menggunakan fungsi animate() jQuery untuk menggunakan gaya "putar" pada elemen div, dan tetapkan atribut seperti kelajuan putaran dan fungsi pelonggaran animasi. Di sini, kami menetapkan kelajuan putaran kepada 1 saat (1000 milisaat) dan menggunakan fungsi pelonggaran "kemudahan-masuk-keluar", serta fungsi panggil balik untuk menukar kandungan teks dalam div:

$('.box').click(function(){
   $(this).animate({width: 'toggle'}, 1000, 'ease-in-out', function(){
      $(this).toggleClass('rotate');
      $(this).text('Hello, jQuery!');
   });
});

Salin selepas log masuk

dalam di atas Dalam kod, kami menggunakan acara klik untuk mencetuskan animasi putaran. Apabila elemen div diklik, ia akan mengecut dan hilang dahulu, kemudian berputar 180 darjah, dan akhirnya kandungan teks baharu akan muncul.

Pada ketika ini, kami telah melengkapkan kesan animasi putaran div yang mudah. Kod lengkap adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Div旋转效果</title>
   <style>
      .box {
         width: 200px;
         height: 200px;
         background-color: #f0f0f0;
         border-radius: 10px;
         text-align: center;
         line-height: 200px;
         font-weight: bold;
         font-size: 24px;
      }
      
      .rotate {
         transform: rotateY(180deg);
      }
   </style>
   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
   <script>
      $(document).ready(function(){
         $('.box').click(function(){
            $(this).animate({width: 'toggle'}, 1000, 'ease-in-out', function(){
               $(this).toggleClass('rotate');
               $(this).text('Hello, jQuery!');
            });
         });
      });
   </script>
</head>
<body>
   <div class="box">Hello, World!</div>
</body>
</html>

Salin selepas log masuk

Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan jQuery untuk melaksanakan kesan animasi putaran div yang mudah. Walaupun kesan ini mudah, ia menunjukkan peranan penting jQuery dalam pelaksanaan kesan animasi. Sudah tentu, kita juga boleh mencapai kesan animasi yang lebih kompleks dengan mempelajari lebih lanjut dan menguasai lebih banyak kemahiran jQuery.

Atas ialah kandungan terperinci Bagaimana untuk memutar div menggunakan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!