Este artigo continuará a adicionar vários efeitos de menu que escrevi no JS nativo. Embora eu tenha procurado muito na internet, ainda gosto de escrever!
Este é o artigo anterior: JavaScript Practical Combat (menu de navegação com efeitos de coleta e liberação de animação)
A seguir, é apresentado o código completo otimizado, o estilo CSS otimizado, as funções de eventos simplificadas, os níveis reduzidos de HTML e excluídos pelo menos 20 linhas de código redundante.
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <cript> window.onload = function () {// ============ Galando menu de animação var Ul = document.getElementByid ('Ul); if (ul.addeventListener) {ul.addeventListener ('mouseOver', ouvinte1, true); ul.addeventListener ('mouseout', ouvinte2, true); ul.addeventListener ('clique', ouvinte3, false); } else if (ul.attachevent) {// compatível com o IE8 e as versões anteriores ul.attachevent ('onmouseover', ouvinte1, false); ul.attachevent ('onmouseout', ouvinte2, false); ul.attachevent ('OnClick', ouvinte3, false); } função ouvinte1 (event) {// evento = evento || window.event; // Compatível com o IE8 e versões anteriores var Target = Event.Target || Event.srceMplement; // compatível com o IE8 e versões anteriores se (Target.tagname.tolowerCase () === 'li') {var div1 = Target.getElementsByTagName ('div') [0]; div1.style.display = 'bloco'; div1.style.Opacity = 1; }} função ouvinte2 (event) {// evento = event || window.event; var no destino = event.target || event.srcelement; if (Target.TagName.TolowerCase () === 'Li') {var div1 = Target.getElementsByTagName ('div') [0]; div1.style.display = 'nenhum'; div1.style.Opacity = 0; div1.onMouseOver = function () {div1.style.display = 'bloqueio'; div1.style.Opacity = 1; }; div1.onMouseOut = function () {div1.style.display = 'nenhum'; div1.style.Opacity = 0; }; }} var bool = true; função ouvinte3 (evento) {var event = event || Window.Event; var no destino = event.Target || Event.srcelement; if (Target.className === 'show-hide') {var adiv = Target.nextElementsibling; if (window.getComputedStyle (adiv, nulo) .Opacidade> 0.5) {bool = false} else {bool = true} var altura = 90, alteração, opacidade, id; if (bool) {changeh = 0; opacidade = 0; var text = Target.innerhtml.slice (0, -1); Target.innerhtml = text+' -'; (function show () {if (alteraçãoh> altura) {clearTimeout (id); return} alteraçãoh += 5; opacidade += 0,06; console.log ('opacidade:' +adiv.style.Opacity +', altura:' +px 'px'; adiv.style.display = 'bloco'; bool = false; } else {changeh = altura; opacidade = 1; var text = Target.innerhtml.slice (0, -1); Target.innerhtml = text +' +'; (function hidden () {if (alteração <0) {cleartimeout (id); adiv.style.display = 'none'; return} alteraçãoh -= 10; opacidade -= 0.11; console.log ('opacia:'+adiv. adiv.style.Opacity = Opacity; bool = true; }}}}}}; </script> <yoy> *{margem: 0; preenchimento: 0; } a, img {borda: 0;} ul {position: absoluto; topo: 20px; Esquerda: 30px; Index z: 100; } #ul Li {display: Inline-Block; Posição: relativa; Altura: 30px; Alinhamento de texto: centro; altura de linha: 30px; preenchimento: 3px; borda: 1px cinza sólido; Radio de fronteira: 10px 10px 0 0; Background-Color: AliceBlue; Cursor: Ponteiro; -Webkit-transição: todos os 0,3s de facilidade; -Moz-transição: todos os 0,3s de facilidade; -ms-transição: todos os 0,3s facilitados; -O-transição: todos os 0,3s facilitados; Transição: todos os 0,3s de facilidade; } #ul li: hover {background-color: aquamarine;} .nav-div {posição: absoluto; largura: 100%; Esquerda: -1px; topo: 37px; Exibir: Nenhum; borda: 1px cinza sólido; Border-top: 0; Radio de fronteira: 0 0 10px 10px; Background-Color: AliceBlue; } .Show-hide {Position: relativo; exibição: bloco; Radio de fronteira: 0 0 10px 10px; Background-Color: LightBlue; -Webkit-transição: todos os 0,3s de facilidade; -Moz-transição: todos os 0,3s de facilidade; -ms-transição: todos os 0,3s facilitados; -O-transição: todos os 0,3s facilitados; Transição: todos os 0,3s de facilidade; fundo da borda: 1px cinza sólido; . Exibir: Nenhum; Radio de fronteira: 0 0 10px 10px; opacidade: 0} .a {z -index: -1; exibição: bloco; Decoração de texto: Nenhum; Radio de fronteira: 10px; -Webkit-transição: todos os 0,3s de facilidade; -Moz-transição: todos os 0,3s de facilidade; -ms-transição: todos os 0,3s facilitados; -O-transição: todos os 0,3s facilitados; Transição: todos os 0,3s de facilidade; } .a: hover {background-color: lavanda} </style> </head> <body> <ul id = "ul"> <li> javascript prático <div> <rpan> efeitos de navegação+</span> <div> <a href = ""> pode ser retraído e colocado submeno </a> <ahref = " Adicionando ... </a> </div> <pan> Outros efeitos especiais+</span> <div> <a href = ""> adicionando continuamente ... </a> <a href = ""> adicionando continuamente ... </a> <a href = ""> adicionando continuamente ... </a> <a href = ""> continuamente adicionando ... <pan> Financial+</span> <div> <a href = ""> as manchetes de hoje </a> <a href = ""> todas as notícias </a> <a href = ""> revisão anterior </a> </div> <span> Technology+</span> <div> <a = ""> hoje em dia </a> HREF = ""> Revisão do passado </a> </div> </li> <li> Notícias de hoje <div> <npan> financeiro+</span> <div> <a href = ""> manchetes de hoje </a> <a href = ""> todas as notícias </a> <a href = ""> <pan> Technology+</span> <div> <a href = ""> manchetes de hoje </a> <a href = ""> todas as notícias </a> <a href = ""> revisão do passado </a> </div> </li> </ul> </body> </html>Imagem de reprodução:
A seguir, o segundo efeito especial: (a implementação específica é muito mais simples que a primeira, preste principalmente atenção ao layout do CSS)
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0; preenchimento: 0; } a, img {border: 0;} #menu {position: absoluto; TOP: 30px; Esquerda: 0; Direita: 0; margem: automático; Largura: 400px; Border-Ift: 1px cinza sólido; Top de borda: 1px cinza sólido; Background-Color: Lemonchiffon; Alinhamento de texto: centro; } #menu li {estilo de lista: nenhum; flutuar: esquerda; Largura: 99px; Altura: 30px; altura de linha: 30px; Direito da borda: 1px cinza sólido; Background-Color: Burlywood; Cor: Branco; -Webkit-transição: todos os 0,5s de facilidade; -Moz-transição: todos os 0,5s de facilidade; -ms-transição: todos os 0,5s facilitados; -O-transição: todos os 0,5s de facilidade; Transição: todos os 0,5s de facilidade; } #menu li: hover {background-color: lemonchiffon; Cor: #336699; } .Contain {Posição: Absolute; Esquerda: -1px; Exibir: Nenhum; Largura: 399px; Altura: 300px; Cor: #336699; Border-Ift: 1px cinza sólido; Direito da borda: 1px cinza sólido; fundo da borda: 1px cinza sólido; Background-Color: Lemonchiffon; } </style> <cript> window.onLoad = function () {var menu = document.getElementById ('menu'); if (MENU.ADDEVENTLISTENER) {MENU.ADDEVENTLISTENER ('MouseOver', Show, False); MENU.ADDEVENTListener ('MouseOut', ocultar, false); } else if (menu.attachevent) {menu.attachevent ('onmouseover', mostre, false); MENU.ATTACHEVENT ('onMouseOut', ocultar, false); } function show (event) {var no destino = 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 destino = event.target || event.srcelement; if (Target.TagName.TolowerCase () === 'Li') {Target.firstElementChild.style.display = 'None'; } else if (Target.parentnode.tagname.tolowercase () === 'li') {Target.style.display = 'nenhum'; } } } </script></head><body><div id="menu"> <ul> <li id="menu1">Siufu's special effects1 <div>111111111111</div> </li> <li id="menu2">Siufu's special effects2 <div>22222222222222222222</div> </li> <li 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>Imagem de reprodução:
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.