Este artículo continuará agregando varios efectos de menú que escribí en JS nativo. Aunque busqué mucho en Internet, ¡todavía me gusta escribirlo yo mismo!
Este es el artículo anterior: JavaScript Practical Combat (menú de navegación con recopilación y liberación de efectos de animación)
El siguiente es el código completo optimizado, el estilo CSS optimizado, las funciones de eventos simplificadas, los niveles de HTML reducidos y eliminan al menos 20 líneas de código redundante.
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <script> window.onload = function () {// ============= Menú de animación de escala var ul = document.getElementByid ('ul'); if (ul.addeventListener) {ul.addeventListener ('mouseover', oyente1, true); ul.addeventListener ('Mouseout', oyente2, verdadero); ul.AdDeventListener ('Haga clic', oyente3, falso); } else if (ul.attachevent) {// compatible con IE8 y versiones anteriores ul.attachevent ('on mouseover', oyente1, falso); ul.attachevent ('OnMouseOut', oyente2, falso); ul.attachevent ('onClick', oyente3, falso); } function listyer1 (evento) {// event = event || window.event; // Compatible con IE8 y versiones anteriores var Target = Event.Target || Event.SrCelement; // Compatible con IE8 y versiones anteriores if (Target.tagname.tolowerCase () === 'Li') {var div1 = target.getElementsByTagName ('div') [0]; div1.style.display = 'bloque'; div1.style.opacity = 1; }} function listyer2 (evento) {// event = event || window.event; var Target = Event.Target || Event.SrCelement; if (target.tagname.tolowerCase () === 'li') {var div1 = target.getElementsBytagName ('div') [0]; div1.style.display = 'ninguno'; 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 listyer3 (evento) {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 hight = 90, Changeh, Opacity, id; if (bool) {Changeh = 0; opacidad = 0; var text = target.innerhtml.slice (0, -1); Target.innerhtml = text+' -'; (función show () {if (cambioh> altura) {ClearTimeOut (id); return} ChangeH += 5; Opacity += 0.06; console.log ('opacity:' +adiv.style.opacity +', altura:' +adiv.style.height); adiv.style.height = cambieh +'px'; adiv.style.popley; adivate; optime; = 'Block'; bool = falso; } else {ChangeH = Height; opacidad = 1; var text = target.innerhtml.slice (0, -1); Target.innerhtml = text +' +'; (function Hidden () {if (Changeh <0) {ClearTimeOut (id); adiv.style.display = 'none'; return} Changeh -= 10; opacidad -= 0.11; console.log ('opacity:'+adiv.style.opacity+', altura:'+adiv.style.height); adiv.style.height = changeh+'px'; adiv.style.opacity = opacidad; bool = verdadero; }}}}}}; </script> <style> *{margen: 0; relleno: 0; } a, img {border: 0;} ul {posición: absoluto; Arriba: 20px; Izquierda: 30px; Índice Z: 100; } #ul li {display: inline-block; Posición: relativo; Altura: 30px; Text-Align: Center; Línea de altura: 30px; relleno: 3px; borde: 1px gris sólido; Border-Radius: 10px 10px 0 0; Color de fondo: Aliceblue; cursor: puntero; -WebKit-Transition: todas las 0.3s de facilidad; -MOZ-Transition: todos los 0.3s de facilidad; -Ms-Transition: todos los 0.3s de facilidad; -O-transición: todas las 0.3 de facilidad; TRANSICIÓN: TODA EL ENFERMEDO 0.3S; } #ul li: hover {background-color: aquamarine;} .nav-div {posición: absoluto; Ancho: 100%; Izquierda: -1px; Arriba: 37px; Pantalla: ninguno; borde: 1px gris sólido; border-top: 0; Border-Radius: 0 0 10px 10px; Color de fondo: Aliceblue; } .show-horned {posición: relativo; Pantalla: bloque; Border-Radius: 0 0 10px 10px; Color de fondo: LightBlue; -WebKit-Transition: todas las 0.3s de facilidad; -MOZ-Transition: todos los 0.3s de facilidad; -Ms-Transition: todos los 0.3s de facilidad; -O-transición: todas las 0.3 de facilidad; TRANSICIÓN: TODA EL ENFERMEDO 0.3S; Border-Bottom: 1px de gris sólido; } .Show-Hide: Hover {Background-Color: Lavender} .A-Div {Background-Color: AliceBlue; Pantalla: ninguno; Border-Radius: 0 0 10px 10px; opacidad: 0} .a {z -index: -1; Pantalla: bloque; Decoración de texto: ninguna; Border-Radius: 10px; -WebKit-Transition: todas las 0.3s de facilidad; -MOZ-Transition: todos los 0.3s de facilidad; -Ms-Transition: todos los 0.3s de facilidad; -O-transición: todas las 0.3 de facilidad; TRANSICIÓN: TODA EL ENFERMEDO 0.3S; } .a: Hover {Background-Color: Lavender} </style> </head> <body> <ul id = "ul"> <li> Javascript práctico <div> <span> efectos de navegación+<//span> <div> <a href = ""> se puede retractarse y colocarse submenu </a> <a href = "> switch página </a> <a href =" "". </div> <span> Otros efectos especiales+</span> <div> <a href = ""> Agregar continuamente ... </a> <a href = ""> Agregar continuamente ... </a> <a href = ""> Agregar continuamente ... </a> <a href = ""> Agregar continuamente ... </a> </iv> </li> <li> javascrit de rendimiento> <span>Financial+</span> <div> <a href="">Today's headlines</a> <a href="">All news</a> <a href="">Previous review</a> </div> <span>Technology+</span> <div> <a href="">Today's headlines</a> <a href=""> href="">All news</a> <a href = ""> Revisión del pasado </a> </div> </li> <li> Noticias de hoy <iv> <span> financiera+</span> <div> <a href = ""> Los titulares de hoy </a> <a href = ""> todas las noticias </a> <a href = ">" Todos las noticias </a> <a href = "> revisión del pasado </a> <span> tecnología+</span> <div> <a href = ""> Los titulares de hoy </a> <a href = ""> todas las noticias </a> <a href = ""> Revisión del pasado </a> </div> </li> </ul> </body> </html>Imagen de reproducción:
El siguiente es el segundo efecto especial: (la implementación específica es mucho más simple que la primera, principalmente prestar atención al diseño de CSS)
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0; relleno: 0; } a, img {border: 0;} #menu {posición: absoluto; arriba: 30px; Izquierda: 0; Derecha: 0; margen: auto; Ancho: 400px; Border-izquierda: 1px de gris sólido; Border-Top: 1px de gris sólido; Color de fondo: limonchiffon; Text-Align: Center; } #menu li {list-style: none; flotante: izquierda; Ancho: 99px; Altura: 30px; Línea de altura: 30px; Border-Right: 1px de gris sólido; Color de fondo: Burlywood; Color: blanco; -WebKit-Transition: todas las 0.5s de facilidad; -MOZ-Transition: todo el facilidad de 0.5s; -Ms-Transition: todos los 0.5s de facilidad; -O-transición: todo el facilidad de 0.5s; TRANSICIÓN: TODO EL ENFERMEDO 0.5S; } #menu li: hover {background-color: limonchiffon; Color: #336699; } .contain {posición: absoluto; Izquierda: -1px; Pantalla: ninguno; Ancho: 399px; Altura: 300px; Color: #336699; Border-izquierda: 1px de gris sólido; Border-Right: 1px de gris sólido; Border-Bottom: 1px de gris sólido; Color de fondo: limonchiffon; } </style> <script> window.onload = function () {var menú = document.getElementById ('menú'); if (menú.AdDeventListener) {Menu.adDeventListener ('Mouseover', show, falso); menú.AdDeventListener ('MouseOut', ocultar, falso); } else if (menú.attachevent) {menu.attachevent ('onmouseover', show, false); menú.attachevent ('OnMouseOut', ocultar, falso); } 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'; }} ial id="menu3">Siufu's special effects3 <div>33333333333</div> </li> <li id="menu3">Siufu's special effects3 <div>3333333333</div> </li> <li id="menu4">Sufu's special effects 4 <div>4444444444444444</div> </li> </ul> </div> </body> </html>Imagen de reproducción:
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.