Meskipun ada banyak plug-in yang tersedia, untuk meningkatkan bersama, saya telah membuat serangkaian contoh seri praktis Javascript dan dibagikan kepada Anda. Jika Anda memiliki saran yang bagus, pastikan untuk menunjukkannya sehingga Anda tidak akan menyesatkan anak -anak Anda!
Hari ini adalah pertempuran pertama: menu dengan efek koleksi dan rilis animasi, efeknya adalah sebagai berikut: (gayanya agak jelek (-^-))
(Karena saya menggunakan editor yang berbeda ketika saya sedang menulis artikel ini, efek demo tidak dapat ditambahkan untuk saat ini. Ini adalah: kode lengkap dan demonstrasi akhir)
Efek animasi: Mouse hover mengubah latar belakang dan warna font dari semua target, pindahkan mouse ke 'navigasi beranda', tampilkan menu pengelompokan di bawah ini. Menu pengelompokan memiliki submenu. Klik untuk Zoom, yang akan mengarah pada efek animasi yang berlebihan! Selain itu, Anda dapat menambah dan menghapus menu navigasi dan sub -submenu sesuka hati tanpa mempengaruhi efeknya!
Bagaimana cara mencapainya?
Langkah 1: Apa yang harus digunakan untuk mengimplementasikan menu? Kode HTML dirancang sebagai berikut, mengikuti prinsip pemisahan kode JS dan kode HTML! Anda tidak dapat melihat kode JS di sini
Ini adalah seperti apa sebelum gaya diterapkan: itu sangat tua! Lai Lai
Langkah 2: Gaya CSS. Mouse waste mengubah latar belakang dan warna font dari semua target, dan secara langsung menggunakan transisi CSS dan: melayang. Namun, kami tidak akan mencantumkan semua tata letak gaya CSS lainnya. Mari kita lakukan sendiri. Perhatikan poin -poin berikut:
#ul {.... z-index: 100; } #ul li {display: inline-block; Posisi: kerabat; TOP: 0; Kiri: -25px; Lebar: 10%; Min-lebar: 70px; Tinggi: 30px; Teks-Align: tengah; Line-Height: 30px; Perbatasan: 1px Solid Grey; Border-Radius: 10px; Latar Belakang-Color: Aliceblue; kursor: pointer; -webkit-transisi: semua kemudahan-out 0,3s; -Moz-transisi: semua kemudahan-out 0,3s; -MS-transisi: semua kemudahan-out 0.3s; --transisi: semua kemudahan-keluar-out 0,3s; Transisi: semua kemudahan-out-out 0,3s; } #ul li: hover {latar belakang-warna: aquamarine; warna: merah;} ... .show-hide: hover {latar belakang-color: beige} .a-div {latar belakang-warna: aquamarine; Border-Radius: 10px; Warna: Hitam; Tampilan: Tidak Ada; opacity: 0} .a {z -index: -1; Tampilan: Blok; ...}Langkah 3: Langkah ini adalah titik kunci. Jika Anda menambahkan acara mendengarkan setiap opsi dan pengelompokan menu, saya pribadi berpikir itu banyak masalah, dan jumlah kode harus lebih besar atau lebih sedikit. Apakah ada cara untuk menambahkan pemantauan ke elemen untuk mencapainya?
Pasti ada jawaban, menggunakan mekanisme peristiwa yang menggelegak! Tambahkan acara mendengarkan pada tag elemen induk, dan langsung mengubah gaya elemen dari acara pemicu dalam fungsi mendengarkan, sesederhana itu!
Kodenya adalah sebagai berikut:
var ul = document.geteLementById ('ul'); ul.addeventlistener ('mouseover', listener1, false); ul.addeventlistener ('mouseout', listener2, false); ul.addeventlistener ('klik', listener3, false);Karena IE8 dan versi di bawah ini tidak memiliki AddEventListener, jika Anda ingin kompatibel, Anda harus menambahkan kode lampiran yang sesuai.
Langkah 4 : Protagonis muncul! Menerapkan Fungsi Mendengarkan Listener1, Listener2, Listener3.
Pertama, mari kita ambil fungsi pendengar paling sederhana, kodenya adalah sebagai berikut:
function listener1 (event) {// event = event || window.event; // kompatibel dengan IE8 dan versi sebelumnya var target = event.target || event.srcelement; // kompatibel dengan IE8 dan versi sebelumnya jika (target.tagname.tolowercase () === 'li') {var div1 = target.getElementsbyTagname ('div') [0]; div1.style.display = 'block'; var i = 0; var id; ; }}Sekali lagi, semuanya untuk IE8 dan versi yang lebih tua.
1. Karena acaranya tidak memiliki atribut target, hanya atribut srcelement yang sesuai
2. Dan Kalimat ini = Event || window.event; sebenarnya bisa dihilangkan di sini. Hanya saat menggunakan atribut untuk mengatur mendengarkan acara pendaftaran, seperti ul.onmouseover = function () {}, atau <ul onmouseover = 'func'>, IE8 dan versi yang lebih lama hanya dapat memperoleh objek peristiwa saat ini melalui window.event
Oke, sekarang Anda telah memperoleh target acara pemicu saat ini, segalanya jauh lebih sederhana, yang melaluinya Anda dapat mengubah diri Anda dan kerabatnya!
Berikut ini adalah fungsi pendengar2, yang dipicu saat mouseout, terutama memanipulasi div elemen anak target, kode adalah sebagai berikut:
function listener2 (event) {// event = event || window.event; var target = event.target || event.srcelement; if (target.tagname.tolowercase () === 'li') {var div1 = target.getElementsbyTagname ('div') [0]; div1.onmouseover = function () {div1.style.display = 'block'; Div1.style.opacity = 1; }; div1.onmouseout = function () {div1.style.display = 'none'; Div1.style.opacity = 0; }; div1.style.display = 'tidak ada'; // Grup ini akan menyembunyikan Div1 ketika mouse keluar dari atas div1.style.opacity = 0; }}Oke, sekarang, sebagian besar efek telah tercapai, dan ada langkah terakhir, yaitu, protagonis No. 1: Fungsi pendengar3, yang terutama bertanggung jawab atas efek penskalaan ketika mouse diklik!
Prinsip Implementasi:
1. Tentukan variabel bool di luar fungsi sebagai sakelar, klik mouse dan klik OFF lagi;
2. Gunakan SetTimeout untuk mencapai efek animasi, secara dinamis mengubah atribut tinggi dan opacity dari submenu, dan atribut tampilan;
Kode lengkapnya adalah sebagai berikut:
var bool = true; function listener3 (event) {var event = event || window.event; var target = event.target || event.srcelement; if (target.className === 'show-hide') {var parent = target.parentElement; var adiv = parent.geteLementsbyclassName ('a-div') [0]; if (window.getComputedstyle (adiv, null) .opacity> 0.5) {bool = false} else {bool = true} var height = 90, changeH, opacity, id; if (bool) {changeH = 0; opacity = 0; target.innerhtml = 'finansial-'; (function show () {if (changeH> height) {clearTimeOut (id); return} changeH += 5; opacity += 0.06; //console.log('opacity :'+adiv.style.opacity+.height = advexixy = adiv.style.height); adiv.style.height = adiv.style.height); adiv.style.height = adiv.style.height); adiv.style.height = adiv.style.height); adiv.style.height = adiv.style.height); adiv.style.height = adiv. adiv.style.display = 'blok'; bool = false; } else {changeH = tinggi; opacity = 1; target.innerhtml = 'financial+'; (fungsi tersembunyi () {if (changeH <0) {clearTimeout (id); adiv.style.display = 'none'; return} changeH -= 10; opacity -= 0.11; //console.log('opacity :'+ADIV.Style.opacity+', height: '+e.style. 'PX'; bool = true; }}}Beberapa poin yang perlu diperhatikan:
1. Ingatlah untuk menghapus ID SetTimeout dan Exit, jika tidak, Loop Mati seperti IF (ChangeH <0) {ClearTimeOut (ID); Adiv.Style.Display = 'None'; return}
2. Waktu tunda setTimeout diatur ke 16.7 karena memenuhi laju penyegaran layar 60fps, yang membuatnya nyaman untuk dilihat
3. Selama proses debugging, saat menetapkan nilai kenaikan dan penurunan ChangeH dan opacity, ingatlah untuk mencetaknya untuk memfasilitasi debugging:
console.log ('opacity:'+adiv.style.opacity+', tinggi:'+adiv.style.height);
4. Akhirnya, hal terpenting dalam implementasi seluruh menu adalah kalimat berikut. Tanpa kalimat ini, Anda tidak dapat menerapkan semua fungsi dengan sempurna. Misalnya: Ketika Anda mengklik sekelompok submenu dan kemudian pindah ke grup lain, situasinya akan sangat berbeda; Alasan mengapa window.getComputedStyle menggunakan ini adalah bahwa ketika Anda membuka pertama kali, mengklik grup apa pun tidak merespons, karena nilai opacity tidak dapat diperoleh saat mengklik pertama kali melalui Event.target secara langsung.
if (window.getComputedstyle (adiv, null) .opacity> 0.5) {bool = false} else {bool = true};
Namun, metode GetComputedStyle tidak didukung di bawah IE9, dan objek elemen IE memiliki properti CurrentStyle;
Jika Anda tidak terlalu terbiasa dengan pemrosesan CSS, lihatlah ringkasan saya: Ringkasan Cara Membaca dan Menulis Gaya CSS Menggunakan JS Asli
Jika Anda ingin tahu lebih banyak tentang aplikasi metode setTimeout (), lihat ini: apakah Anda benar -benar tahu cara kerja setTimeout
Untuk mekanisme penanganan acara, Anda dapat melihat ini: Tinjauan Penanganan Acara di DOM dan analisis komprehensif dari prinsip -prinsip penanganan acara di DOM
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.