butang navigasi putar jquery

Dengan populariti peranti mudah alih dan reka bentuk web responsif, lebih banyak tapak web mula menggunakan butang navigasi berputar untuk meningkatkan pengalaman pengguna. Berbanding dengan menu navigasi tradisional, butang navigasi jenis ini lebih ringkas, lebih mudah untuk dikendalikan dan boleh menyesuaikan diri dengan saiz peranti yang berbeza dengan lebih baik.

Dalam artikel ini, kami akan meneroka cara mencipta butang navigasi berputar menggunakan jQuery, dan memperkenalkan beberapa kesan animasi putaran biasa dan teknik lain yang berkaitan.

Langkah 1: Reka letak HTML dan CSS

Pertama, kita perlu mencipta struktur asas butang navigasi berputar dalam dokumen HTML:

<div class="rotate-btn">
  <span class="line line1"></span>
  <span class="line line2"></span>
  <span class="line line3"></span>
</div>

Di sini kita mencipta div elemen , mengandungi tiga elemen rentang, digunakan untuk mewakili tiga garis lurus butang navigasi. Kami menggunakan gaya CSS untuk menggayakan elemen ini:

.rotate-btn {
  display: block;
  cursor: pointer;
  position: relative;
  width: 40px;
  height: 40px;
}

.line {
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #000;
  transition: transform .3s ease-in-out;
}

.line1 {
  top: 0;
}

.line2 {
  top: 50%;
  transform: translateY(-50%);
}

.line3 {
  bottom: 0;
}

Dalam gaya CSS di atas, kami menetapkan lebar dan tinggi butang navigasi putaran kepada 40px dan menentukan kedudukannya sebagai kedudukan relatif. Pada masa yang sama, kami menetapkan kedudukan dan gaya tiga segmen garisan menggunakan kedudukan mutlak. Apa yang perlu diperhatikan di sini ialah kami menggunakan atribut transform dan atribut peralihan untuk mencapai kesan animasi putaran.

Langkah 2: Tambah kod jQuery

Seterusnya, kita perlu menggunakan jQuery untuk menambah kesan interaktif. Kami mula-mula menambah perpustakaan jQuery pada fail HTML, dan kemudian menulis kod berikut:

$(document).ready(function() {
  $('.rotate-btn').click(function() {
    $(this).toggleClass('active');
  });
});

Dalam kod di atas, kami menggunakan kaedah sedia jQuery untuk memastikan kod skrip dilaksanakan selepas dokumen dimuatkan. Kemudian dalam kaedah klik, kami menambah acara klik untuk butang navigasi putaran, dan apabila butang diklik, kami menggunakan kaedah toggleClass untuk menogol kelas aktif butang.

Langkah 3: Tambah kesan animasi

Untuk menjadikan butang navigasi berputar lebih jelas, kami boleh menggunakan beberapa teknik penggayaan dan animasi untuk meningkatkan kesan visualnya. Berikut ialah beberapa kesan animasi putaran biasa:

1. Kesan flip mudah

.rotate-btn.active .line1 {
  transform: translateY(6px) rotate(-45deg);
}

.rotate-btn.active .line2 {
  opacity: 0;
}

.rotate-btn.active .line3 {
  transform: translateY(-6px) rotate(45deg);
}

Dalam kesan ini, kami menggunakan atribut putar dan atribut translateY untuk mencapai flip lurus garisan dan pan atas dan bawah. Pada masa yang sama, tetapkan garis lurus tengah kepada telus untuk mencapai kesan tersembunyi.

2. Kesan gelombang

.rotate-btn.active .line1 {
  transform: translateY(6px) rotate(45deg);
}

.rotate-btn.active .line2 {
  transform: rotate(-45deg);
}

.rotate-btn.active .line3 {
  transform: translateY(-6px) rotate(135deg);
}

Dalam kesan ini, kami menetapkan garis lurus pertama dan terakhir untuk berputar dengan tambah atau tolak 45 darjah masing-masing, manakala tengah Garis lurus akan berputar mengelilingi pusat.

3. Kesan lantunan

.rotate-btn.active .line1 {
  transform: translateY(10px);
}

.rotate-btn.active .line2 {
  transform: scale(0.8);
}

.rotate-btn.active .line3 {
  transform: translateY(-10px);
}

Dalam kesan ini, kami membuat garis lurus diterjemahkan ke atas dan ke bawah dalam arah menegak, sambil mengecilkan garis lurus tengah.

Di sini kami hanya memperkenalkan tiga kesan Sebenarnya, terdapat banyak kesan animasi untuk butang navigasi berputar, dan pembangun boleh melaraskan dan mengubah suainya mengikut keperluan mereka sendiri.

Ringkasan

Dalam artikel ini, kami memperkenalkan proses asas mencipta butang navigasi berputar dan menerangkan cara menggunakan jQuery dan CSS untuk mencapai kesan dan animasi interaktif. Saya percaya bahawa dengan mempelajari artikel ini, anda telah menguasai kemahiran asas mencipta butang navigasi berputar, dan anda boleh menggunakan fungsi ini dalam tapak web anda sendiri untuk meningkatkan pengalaman pengguna dan estetika tapak web.

Atas ialah kandungan terperinci butang navigasi putar jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!