Dieser Artikel wird weiterhin verschiedene Menüeffekte hinzufügen, die ich in nativen JS geschrieben habe. Obwohl ich im Internet viel gesucht habe, schreibe ich es immer noch gerne selbst!
Dies ist der vorherige Artikel: JavaScript Practical Combat (Navigationsmenü mit Sammeln und Freigabe von Animationseffekten)
Das Folgende ist der optimierte komplette Code, den optimierten CSS -Stil, vereinfachte Ereignisfunktionen, reduzierte HTML -Pegel und löschte mindestens 20 Zeilen redundanter Code.
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> </title> <script> window.onload = function () {// ======================================================= SKALING-Animations-Menü vari Vari. if (ul.addeventListener) {ul.addeventListener ('mouseover', listener1, true); ul.addeventListener ('mouseout', listener2, true); ul.addeventListener ('click', listener3, false); } else if (ul.attachEvent) {// kompatibel mit IE8 und früheren Versionen ul.attacheAvent ('Onmouseover', Listener1, False); Ul.attachevent ('Onmouseout', Listener2, Falsch); ul.attachevent ('Onclick', Hörer3, falsch); } Funktion Listener1 (Ereignis) {// Ereignis = Ereignis || window.event; // kompatibel mit IE8 und vorherigen Versionen var target = event.target || event.srcelement; // kompatibel mit IE8 und vorherigen Versionen if (target.tagname.tolowerCase () === 'li') {var div1 = target.getElementsByTagName ('div') [0]; Div1.Style.Display = 'Block'; Div1.Style.Opacity = 1; }} Funktion Listener2 (Ereignis) {// Ereignis = Ereignis || window.event; var target = event.target || event.srcelement; if (target.tagname.tolowerCase () === 'li') {var div1 = target.getElementsByTagName ('div') [0]; div1.style.display = 'none'; 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; Funktion Hörer3 (Ereignis) {var event = Ereignis || Fenster.Event; var target = event.target || event.srcelement; if (target.className === 'show-hide') {var adiv = target.NextElementSibling; if (window.getComputedStyle (adiv, null) .oopacity> 0.5) {bool = false} else {bool = true} var height = 90, ChangeH, Deckkraft, ID; if (bool) {changeH = 0; Opazität = 0; var text = target.innerhtml.slice (0, -1); target.innerHtml = text+' -'; (Funktion show () {if (ChangeH> Höhe) {ClearTimeout (ID); return} changeH += 5; Opazität += 0,06; Konsole.log ('Opazität:' +adiv.style.opacity +', Höhe:' +adiv.style.height); adiv.Style.Display = 'Block'; bool = falsch; } else {ChangeH = Höhe; Opazität = 1; var text = target.innerhtml.slice (0, -1); target.innerHtml = text +' +'; (Funktion hidden () {if (changeH <0) {clearimeout (id); adiv.style.display = 'none'; return} changeH -= 10; Opazität -= 0,11; console.log ('opacity:'+adiv.style.Sopacity+', Höhe:'+adiv.style.height); adiv.Style.opacity = opacity; bool = wahr; }}}}}}; </script> <style> *{Margin: 0; Polsterung: 0; } a, img {border: 0;} ul {Position: absolut; Top: 20px; links: 30px; Z-Index: 100; } #ul li {display: Inline-Block; Position: Relativ; Höhe: 30px; Text-Align: Mitte; Zeilenhöhe: 30px; Polsterung: 3px; Grenze: 1px Festgrau; Border-Radius: 10px 10px 0 0; Hintergrundfarbe: AliceBlue; Cursor: Zeiger; -Webkit-Übergang: Alle Leichtigkeiten von 0,3s; -moz-Übergang: Alle Leichtigkeiten von 0,3s; -MS-Übergang: Alle Leichtigkeiten von 0,3s; -O-Übergang: Alle Leichtigkeiten von 0,3s; Übergang: Alle Leichtigkeiten von 0,3s; } #ul li: hover {Hintergrundfarbe: aquamarin;} .nav-div {Position: absolut; Breite: 100%; links: -1px; Oben: 37px; Anzeige: Keine; Grenze: 1px Festgrau; Grenze: 0; Border-Radius: 0 0 10px 10px; Hintergrundfarbe: AliceBlue; } .show-hide {Position: relativ; Anzeige: Block; Border-Radius: 0 0 10px 10px; Hintergrundfarbe: hellblau; -Webkit-Übergang: Alle Leichtigkeiten von 0,3s; -moz-Übergang: Alle Leichtigkeiten von 0,3s; -Ms-Übergang: Alle Leichtigkeiten von 0,3s; -O-Übergang: Alle Leichtigkeiten von 0,3s; Übergang: Alle Leichtigkeiten von 0,3s; Grenzboden: 1PX Festgrau; } .show-hide: hover {Hintergrundfarbe: Lavendel} .a-div {Hintergrundfarbe: AliceBlue; Anzeige: Keine; Border-Radius: 0 0 10px 10px; Opazität: 0} .A {Z -Index: -1; Anzeige: Block; Textdekoration: Keine; Border-Radius: 10px; -Webkit-Übergang: Alle Leichtigkeiten von 0,3s; -moz-Übergang: Alle Leichtigkeiten von 0,3s; -Ms-Übergang: Alle Leichtigkeiten von 0,3s; -O-Übergang: Alle Leichtigkeiten von 0,3s; Übergang: Alle Leichtigkeiten von 0,3s; } .a: Hover {Hintergrundfarbe: Lavendel} </style> </head> <body> <ul id = "ul"> <li> JavaScript praktisch <div> <span> Navigationseffekte+</span> <div> <a href = "" kann zurückgezogen und platziert werden. Hinzufügen ... </a> </div> <span> Andere Spezialeffekte+</span> <div> <a href = ""> kontinuierlich hinzufügen ... </a> <a href = ""> kontinuierlich hinzugefügt ... </a> <a href = ""> kontinuierlich addiert ... </a> <a href = "> kontinuierlich addiert ... </a- <span> finanziell+</span> <div> <a href = ""> Die heutigen Überschriften </a> <a href = ""> Alle Nachrichten </a> <a href = ""> Vorherige Rezension </a> </div> <Pan> Technologie+</span> <a <a href = "> HAWE HAWE ALLE MECSS </a; href = ""> Bewertung der Vergangenheit </a> </div> </li> <li> Die heutigen Nachrichten <Div> <div> finanzielle+</span> <div> <a href = ""> Die heutigen Schlagzeilen </a> <a href = ""> Alle Nachrichten </a> <a href = "; <span> Technologie+</span> <div> <a href = ""> Die heutigen Überschriften </a> <a href = ""> Alle Nachrichten </a> <a href = ""> Bewertung der Vergangenheit </a> </div> </li> </ul> </body> </html> </html> </li> </ul> </body> </html >> </div> </li> </ul> </body> </html >> </html>Reproduktionsbild:
Das Folgende ist der zweite Spezialeffekt: (Die spezifische Implementierung ist viel einfacher als die erste, achten Sie hauptsächlich auf das CSS -Layout)
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> </title> <style> *{Margin: 0; Polsterung: 0; } a, img {Border: 0;} #Menu {Position: absolut; Top: 30px; links: 0; Rechts: 0; Rand: Auto; Breite: 400px; Border-Links: 1PX Festgrau; Grenze: 1px Festgrau; Hintergrundfarbe: Lemonchiffon; Text-Align: Mitte; } #Menu li {Listenstil: Keine; float: links; Breite: 99px; Höhe: 30px; Zeilenhöhe: 30px; Grenzrechte: 1PX Festgrau; Hintergrundfarbe: Burlywood; Farbe: weiß; -Webkit-Übergang: Alle Leichtigkeiten von 0,5s; -moz-transition: alle leichten 0,5s; -MS-Übergang: Alle Leichtigkeiten von 0,5s; -O-Übergang: Alle Leichtigkeiten von 0,5s; Übergang: Alle leichten 0,5 Sekunden; } #Menu li: Hover {Hintergrundfarbe: Lemonchiffon; Farbe: #336699; } .Contain {Position: absolut; links: -1px; Anzeige: Keine; Breite: 399px; Höhe: 300px; Farbe: #336699; Border-Links: 1PX Festgrau; Grenzrechte: 1PX Festgrau; Grenzboden: 1PX Festgrau; Hintergrundfarbe: Lemonchiffon; } </style> <script> window.onload = function () {varmenü = document.getElementById ('Menü'); if (mseu.adDeVentListener) {Menü.AdDeVentListener ('Mouseover', show, false); Menü } else if (mseu.attachEvent) {mseu.attachEvent ('onmouseover', show, false); Menü } Funktionshow (Ereignis) {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 (Ereignis) {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> <div id = "mseu"> <ul> <li id = "mseu1"> siufus Spezialeffekte1 <div> 111111111111 </div> </li> <li id = "mseu2"> Siufu's Special Effekte2 <Div> 22222222222222222222222 </div> 222222222222222222 </div> 222222222222222222 </div> 222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222. ID = "Menu3"> Siufu's Special Effects3 <Div> 33333333333 </div> </li> <li id = "Menu3"> Siufus Spezialeffekte3 <div> 33333333333 </div> </li> <li id = "Menu444444444444444444444444444444444444444444444444444444444444444444444444444444. </ul> </div> </body> </html>Reproduktionsbild:
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.