Artikel ini akan terus menambahkan berbagai efek menu yang saya tulis di JS asli. Meskipun saya banyak mencari di internet, saya masih suka menulisnya sendiri!
Ini adalah artikel sebelumnya: JavaScript Practical Combat (menu navigasi dengan mengumpulkan dan merilis efek animasi)
Berikut ini adalah kode lengkap yang dioptimalkan, gaya CSS yang dioptimalkan, fungsi acara yang disederhanakan, berkurangnya level HTML, dan menghapus setidaknya 20 baris kode redundan.
<!!! if (ul.addeventListener) {ul.addeventListener ('mouseover', listener1, true); ul.addeventlistener ('mouseout', listener2, true); ul.addeventlistener ('klik', listener3, false); } lain jika (ul.attachevent) {// kompatibel dengan IE8 dan versi sebelumnya ul.attachevent ('onmouseover', listener1, false); ul.attachevent ('onmouseout', listener2, false); ul.attachevent ('onClick', listener3, false); } 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'; Div1.style.opacity = 1; }} 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.style.display = 'tidak ada'; Div1.style.opacity = 0; div1.onmouseover = function () {div1.style.display = 'block'; Div1.style.opacity = 1; }; div1.onmouseout = function () {div1.style.display = 'none'; Div1.style.opacity = 0; }; }} var bool = true; function listener3 (event) {var event = event || window.event; var target = event.target || event.srcelement; if (target.className === 'show-hide') {var adiv = target.nextElementsibling; 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; var text = target.innerHtml.slice (0, -1); target.innerhtml = text+' -'; (function show () {if (changeH> height) {clearTimeOut (id); return} changeH += 5; opacity += 0.06; console.log ('opacity:' +adiv.style.opacity +', height:' +adiv.style.height); adiv.style.height = changity = adiv.style.height); adiv.style.height = changity = adiv.style.height); adiv.style.height = changity = adiv.style.height); adiv.style.height = changity = adiv.style.height); adiv.style.height = changity = adiv.style.height); adiv.style.height = changity = adiv. adiv.style.display = 'blok'; bool = false; } else {changeH = tinggi; opacity = 1; var text = target.innerHtml.slice (0, -1); target.innerHtml = text +' +'; (fungsi tersembunyi () {if (changeH <0) {clearTimeout (id); adiv.style.display = 'none'; return} changeH -= 10; opacity -= 0.11; console.log ('opacity:'+adiv.style.opacity+', tinggi:'+adiv.style.height); pai (height '; adiv.style.opacity = opacity; bool = true; }}}}}}; </script> <tyle> *{margin: 0; Padding: 0; } a, img {border: 0;} ul {position: absolute; Atas: 20px; Kiri: 30px; z-index: 100; } #ul li {display: inline-block; Posisi: kerabat; Tinggi: 30px; Teks-Align: tengah; Line-Height: 30px; padding: 3px; Perbatasan: 1px Solid Grey; Border-Radius: 10px 10px 0 0; 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 {background-color: aquamarine;} .nav-div {position: absolute; Lebar: 100%; Kiri: -1px; Atas: 37px; Tampilan: Tidak Ada; Perbatasan: 1px Solid Grey; Border-Top: 0; Border-Radius: 0 0 10px 10px; Latar Belakang-Color: Aliceblue; } .show-hide {position: relatif; Tampilan: Blok; Border-Radius: 0 0 10px 10px; Latar Belakang: LightBlue; -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; Border-Bottom: 1px Solid Grey; } .show-hide: hover {background-color: lavender} .a-div {background-color: aliceblue; Tampilan: Tidak Ada; Border-Radius: 0 0 10px 10px; opacity: 0} .a {z -index: -1; Tampilan: Blok; Dekorasi Teks: Tidak Ada; Border-Radius: 10px; -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; } .a: hover {background-color: lavender} </tyle> </head> <body> <ul id = "ul"> <li> JavaScript Praktis <SEV> <span> Efek navigasi+</span> <ve> <a href = ""> dapat ditarik dan ditempatkan submenu </a> <a href = ""> sakelar halaman </a </a> </a> <a href = ""> sakelar = a href = A href = "> Menambahkan ... </a> </div> <span> Efek Khusus Lainnya+</span> <div> <a href = ""> terus menambahkan ... </a> <a href = ""> terus menambahkan ... </a> <a href = ""> continuous quidu- </a> </a> </a href = ""> Continuously Adding ... Optimasi <SEV> <SPAN> Keuangan+</span> <div> <a href = ""> headlines hari ini </a> <a href = ""> semua berita </a> <a href = ""> ulasan sebelumnya </a> </div> <span> Teknologi+</span> <ver> <div> <a href = "" hari ini <span> </span> <div> <a href = "> hari ini </span> </span> <a href ="> hari ini news</a> <a href="">Review of the past</a> </div> </li> <li>Today's news<div> <span>Financial+</span> <div> <a href="">Today's headlines</a> <a href="">All news</a> <a href="">All news</a> <a href="">Review of the past</a> </div> <span> Teknologi+</span> <div> <a href = ""> headlines hari ini </a> <a href = ""> semua berita </a> <a href = ""> Ulasan masa lalu </a> </div> </li> </ul> </ulet> </html>Gambar reproduksi:
Berikut ini adalah efek khusus kedua: (implementasi spesifik jauh lebih sederhana daripada yang pertama, terutama memperhatikan tata letak CSS)
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> </iteme> <tyle> *{margin: 0; Padding: 0; } a, img {border: 0;} #menu {position: absolute; Atas: 30px; Kiri: 0; Kanan: 0; margin: otomatis; Lebar: 400px; Border-left: 1px solid grey; Border-top: 1px solid grey; Latar Belakang-Color: Lemonchiffon; Teks-Align: tengah; } #menu li {List-style: none; float: kiri; Lebar: 99px; Tinggi: 30px; Line-Height: 30px; Border-Right: 1px Solid Grey; Latar Belakang-Color: Burlywood; Warna: Putih; -webkit-transisi: semua kemudahan-out 0,5s; -Moz-transisi: semua kemudahan-out 0,5s; -MS-transisi: semua kemudahan-out 0,5s; --transisi: semua kemudahan-keluar-out 0,5s; Transisi: semua kemudahan-out 0,5s; } #menu li: hover {latar belakang-warna: lemonchiffon; Warna: #336699; } .contain {position: absolute; Kiri: -1px; Tampilan: Tidak Ada; Lebar: 399px; Tinggi: 300px; Warna: #336699; Border-left: 1px solid grey; Border-Right: 1px Solid Grey; Border-Bottom: 1px Solid Grey; Latar Belakang-Color: Lemonchiffon; } </tyle> <script> window.onload = function () {var menu = document.getElementById ('menu'); if (menu.addeventListener) {menu.addeventListener ('mouseover', show, false); menu.addeventListener ('mouseout', hide, false); } else if (menu.AttachEvent) {menu.AttachEvent ('onMouseOver', show, false); menu.attachevent ('onmouseout', hide, false); } function show (event) {var target = event.target || event.srcelement; if (target.tagname.tolowercase () === 'li') {target.firstelementchild.style.display = 'block'; } else if (target.parentnode.tagname.tolowercase () === 'li') {target.style.display = 'block'; }} function hide (event) {var target = event.target || event.srcelement; if (target.tagname.tolowercase () === 'li') {target.firstelementchild.style.display = 'none'; } else if (target.parentnode.tagname.tolowercase () === 'li') {target.style.display = 'none'; }}} </script> </head> <body> <v id = "menu"> <ul> <li id = "menu1"> efek khusus Siufu <Div> 111111111111 </div> </li> <li id = "menu2"> Efek Khusus SiuFu </Div> <2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 ID = "menu3"> Efek Khusus Siufu3 <SEV> 33333333333 </div> </li> <li id = "menu3"> Efek Khusus Siufu3 <veR> 3333333333 </Div> </li> <li id = "menu4"> Efek Khusus Sufu 4 </Div> </li> <li = "menu4"> Efek Khusus Sufu 4 </Div> </li> <li = "menu"> Sufu's Effects 4 </div> </li> <li = "menu4"> Sufu's Effects 4 </Div> </li> <li = "menu4"> Sufu's Effects 4 </Div> </li> <li = "menu4"> Sufu's Effects 4 </Div> </li> <li = "menu4"> Sufu's Effects khusus 4 </div> 444444444444444. </ul> </div> </body> </html>Gambar reproduksi:
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.