Cet article continuera d'ajouter divers effets de menu que j'ai écrits dans natif JS. Bien que j'aie cherché beaucoup sur Internet, j'aime toujours l'écrire moi-même!
Ceci est l'article précédent: JavaScript Practical Combat (Menu de navigation avec collection et libération d'effets d'animation)
Ce qui suit est le code complet optimisé, le style CSS optimisé, les fonctions d'événement simplifiées, la réduction des niveaux de HTML et supprimé au moins 20 lignes de code redondant.
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <title> </ title> <cript> window.onload = function () {// ========== Menu d'animation de mise if (ul.addeventListener) {ul.addeventListener ('MouseOver', écouteur1, true); ul.addeventListener («Mouseout», écouteur2, true); ul.addeventListener ('click', écouteur3, false); } else if (ul.attachevent) {// compatible avec ie8 et versions précédentes ul.attachevent ('onMouseOver', écouteur1, false); ul.attachevent ('onMouseout', auditeur2, false); ul.attachevent ('onclick', auditeur3, false); } Fonction écouteur1 (événement) {// Event = Event || Window.Event; // compatible avec IE8 et les versions précédentes var cible = event.target || event.srcelement; // compatible avec IE8 et les versions précédentes if (target.tagname.tolowercase () === 'li') {var div1 = cible.getElementsByTagName ('div') [0]; div1.style.display = 'bloc'; div1.style.opacity = 1; }} Fonction écouteur2 (événement) {// Event = Event || Window.Event; var target = event.target || event.srcelement; if (target.tagname.tolowercase () === 'li') {var div1 = cible.getElementsByTagName ('div') [0]; div1.style.display = 'Aucun'; div1.style.opacity = 0; div1.onmouseOver = function () {div1.style.display = 'block'; div1.style.opacity = 1; }; div1.onmouseout = function () {div1.style.display = 'Aucun'; div1.style.opacity = 0; }; }} var bool = true; Fonction écouteur3 (événement) {var event = event || window.event; var cible = event.target || event.srcelement; if (target.classname === 'show-hide') {var adiv = cible.NextElementSibling; if (window.getCompuledStyle (adiv, null) .opacity> 0.5) {bool = false} else {bool = true} var height = 90, changeh, opacity, id; if (bool) {changeh = 0; opacité = 0; var text = cible.innerhtml.slice (0, -1); Target.InnerHtml = Text + '-'; (fonction 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 = changeh + 'px'; adiv.style.opacecacity; adiv.style.display = 'block'; id = setTimeout (function () {cleartimeout (id); show ();}, 16.7);}) (); bool = false; } else {changeh = height; opacité = 1; var text = cible.innerhtml.slice (0, -1); Target.InnerHtml = Text + '+'; (fonction Hidden () {if (changeh <0) {ClearTimeout (id); adiv.style.display = 'nul'; return} changeh - = 10; opacity - = 0.11; console.log ('opacity:' + adiv.style.opacity + ', height:' + adiv.style.height); Adiv.Style.height = changeh + 'px'; adiv.style.opacity = opacity; id = settimeout (function () {cleartimeout (id); Hidden ();}, 16.7);}) (); bool = true; }}}}}}; </ script> <style> * {margin: 0; rembourrage: 0; } a, img {border: 0;} ul {position: absolu; En haut: 20px; Gauche: 30px; Z-Index: 100; } #ul li {affichage: bloc en ligne; Position: relative; hauteur: 30px; Texte-aligne: Centre; hauteur de ligne: 30px; rembourrage: 3px; Border: 1px gris massif; Border-Radius: 10px 10px 0 0; Color d'arrière-plan: AliceBlue; curseur: pointeur; -Webkit-Transition: Tous les 0,3 de facilité de 0,3; -Moz-Transition: Tous les 0,3 de facilité de 0,3; -ms-transition: tous les 0,3 de facilité de 0,3; -o-transition: Tous les 0,3 de facilité de 0,3; Transition: Tous les 0,3 de facilité de 0,3; } #ul li: hover {background-color: aquamarine;} .nav-div {position: absolu; Largeur: 100%; gauche: -1px; En haut: 37px; Affichage: aucun; Border: 1px gris massif; Border-Top: 0; Border-Radius: 0 0 10px 10px; Color d'arrière-plan: AliceBlue; } .show-hide {position: relatif; Affichage: bloc; Border-Radius: 0 0 10px 10px; Color d'arrière-plan: LightBlue; -Webkit-Transition: Tous les 0,3 de facilité de 0,3; -Moz-Transition: Tous les 0,3 de facilité de 0,3; -ms-transition: tous les 0,3 de facilité de 0,3; -o-transition: Tous les 0,3 de facilité de 0,3; Transition: Tous les 0,3 de facilité de 0,3; Border-Bottom: 1px gris massif; } .show-hide: hover {background-color: lavender} .a-div {background-Color: AliceBlue; Affichage: aucun; Border-Radius: 0 0 10px 10px; OPACITY: 0} .A {Z-Index: -1; Affichage: bloc; Décoration du texte: aucune; Border-Radius: 10px; -Webkit-Transition: Tous les 0,3 de facilité de 0,3; -Moz-Transition: Tous les 0,3 de facilité de 0,3; -ms-transition: tous les 0,3 de facilité de 0,3; -o-transition: Tous les 0,3 de facilité de 0,3; Transition: Tous les 0,3 de facilité de 0,3; } .a: Hover {background-Color: lavender} </ style> </ head> <body> <ul id = "ul"> <li> javascript pratique <v> <span> effets de navigation + </span> <v> <a href = ""> Ajout ... </a> </div> <span> Autres effets spéciaux + </span> <v> <a href = ""> Ajout continu ... </a> <a href = ""> Ajout continu ... </a> <a href = ""> Ajout continu ... </a> <a href = ""> Adding de façon continue ... </a> Optimisation <div> <span> Financial + </span> <div> <a href = ""> Les titres d'aujourd'hui </a> <a href = ""> All News </a> <a href = ""> Revue précédente </a> </v> <span> Technology + </span> <v> <a href = ""> Today's Threads </a> News </a> <a href = ""> Revue du passé </a> </div> </li> <li> Les nouvelles d'aujourd'hui <div> <span> financières + </span> <div> <a href = ""> Todayes de aujourd'hui </a> <a href = ""> Toutes les nouvelles </a> <a href = ""> Toutes les nouvelles </a> </div> <span> Technology + </span> <v> <a href = ""> Les titres d'aujourd'hui </a> <a href = ""> Toutes les nouvelles </a> <a href = ""> Revue du passé </a> </div> </li> </ul> </ body> </html>Image de reproduction:
Ce qui suit est le deuxième effet spécial: (l'implémentation spécifique est beaucoup plus simple que la première, prêtez principalement à la disposition CSS)
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <ititle> </title> <style> * {margin: 0; rembourrage: 0; } a, img {border: 0;} #menu {position: absolue; En haut: 30px; à gauche: 0; à droite: 0; marge: auto; Largeur: 400px; Border-Left: 1px gris massif; Border-top: 1px gris massif; Color en arrière-plan: Lemonchiffon; Texte-aligne: Centre; } #menu li {list-style: Aucun; flottant: à gauche; Largeur: 99px; hauteur: 30px; hauteur de ligne: 30px; Border-droite: 1px gris massif; Color en arrière-plan: Burlywood; Couleur: blanc; -Webkit-Transition: Tous les 0,5 de facilité de 0,5; -Moz-Transition: Tous les 0,5 de la facilité de 0,5; -ms-transition: tous les 0,5 de la facilité de 0,5; -o-transition: Tous les 0,5 de la facilité de 0,5; Transition: Tous les 0,5 de facilité de 0,5; } #menu li: Hover {fond-couleur: Lemonchiffon; Couleur: # 336699; } .Contain {position: absolue; gauche: -1px; Affichage: aucun; Largeur: 399px; hauteur: 300px; Couleur: # 336699; Border-Left: 1px gris massif; Border-droite: 1px gris massif; Border-Bottom: 1px gris massif; Color en arrière-plan: Lemonchiffon; } </ style> <cript> 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); } fonction 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 = 'Aucun'; } else if (target.parentNode.tagname.tolowercase () === 'li') {target.style.display = 'Aucun'; }}} </ script> </ head> <body> <div id = "menu"> <ul> <li id = "menu1"> Les effets spéciaux de Siufu1 <div> 11111111111 </v> </li> <li id = "menu2"> Siufu's Special Effects2 </ div> 22222222222222222221 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>Image de reproduction:
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.