Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > butang navigasi putar jquery

butang navigasi putar jquery

WBOY
Lepaskan: 2023-05-12 10:20:36
asal
573 orang telah melayarinya

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>
Salin selepas log masuk

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;
}
Salin selepas log masuk

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');
  });
});
Salin selepas log masuk

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);
}
Salin selepas log masuk

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.

  1. 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);
}
Salin selepas log masuk

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.

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

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

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

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan