Bien qu'il existe de nombreux plug-ins disponibles, afin de m'améliorer ensemble, j'ai fait une série d'exemples de séries pratiques JavaScript et partagée avec vous. Si vous avez de bonnes suggestions, assurez-vous de les signaler afin de ne pas induire en erreur vos enfants!
Aujourd'hui est la première bataille: un menu avec un effet d'animation de collection et de sortie, l'effet est le suivant: (Le style est un peu laid (- ^ -))
(Depuis que j'ai utilisé différents éditeurs lorsque j'écrivais cet article, l'effet de démonstration ne peut pas être ajouté pour le moment. Voici: le code et la démonstration finaux finaux)
Effet d'animation: le survol de la souris modifie l'arrière-plan et la couleur de la police de toutes les cibles, déplacez la souris vers la «navigation de page d'accueil», affichez le menu de regroupement ci-dessous. Le menu de regroupement a un sous-menu. Cliquez pour zoomer, ce qui conduira à des effets d'animation excessifs! De plus, vous pouvez ajouter et supprimer des menus de navigation et un sous-menu à volonté sans affecter l'effet!
Comment y parvenir?
Étape 1: Que utiliser pour implémenter le menu? Le code HTML est conçu comme suit, suivant le principe de séparation du code JS et du code HTML! Vous ne pouvez pas voir un code JS ici
C'était à quoi il ressemblait avant que le style ne soit appliqué: c'était très vieux! ! !
Étape 2: style CSS. La souris en survol modifie l'arrière-plan et la couleur de la police de toutes les cibles, et utilise directement la transition CSS et: survol. Cependant, nous ne répertorierons pas toutes les autres mises en page de style CSS. Faisons-le vous-même. Faites attention aux points suivants:
#ul {.... z-index: 100; } #ul li {affichage: bloc en ligne; Position: relative; en haut: 0; gauche: -25px; Largeur: 10%; largeur min: 70px; hauteur: 30px; Texte-aligne: Centre; hauteur de ligne: 30px; Border: 1px gris massif; Border-Radius: 10px; 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; couleur: rouge;} ... .show-hide: hover {background-color: beige} .a-div {background-color: aquamarine; Border-Radius: 10px; Couleur: noir; Affichage: aucun; OPACITY: 0} .A {Z-Index: -1; Affichage: bloc; ...}Étape 3: Cette étape est le point clé. Si vous ajoutez des événements à écouter chaque option de menu et à regrouper, je pense personnellement que c'est beaucoup de problèmes et la quantité de code doit être supérieure ou moins. Existe-t-il un moyen d'ajouter une surveillance à un élément pour y parvenir?
Il doit y avoir une réponse, en utilisant le mécanisme bouillonnant des événements! Ajoutez une écoute d'événement sur la balise Parent Element UL et modifiez directement le style d'élément de l'événement de déclenchement dans la fonction d'écoute, c'est aussi simple!
Le code est le suivant:
var ul = document.getElementById ('ul'); ul.addeventListener («MouseOver», auditeur1, false); ul.addeventListener («Mouseout», écouteur2, false); ul.addeventListener ('click', écouteur3, false);Étant donné que les versions IE8 et ci-dessous n'ont pas d'addEventListener, si vous souhaitez être compatible, vous devez ajouter le code correspondant de PiéSent.
Étape 4 : Le protagoniste apparaît! Implémentez l'auditeur1, écouteur2, les fonctions d'écoute de l'écoute3.
Tout d'abord, prenons la fonction le plus simple auditeur1, le code est le suivant:
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'; var i = 0; var id; (fonction foo () {if (i> = 1) {cleartimeout (id); id = null; return;} i + = 0.2; div1.style.opacity = i; id = setTimeout (function () {cleartimeout (id); foo ()}, 30);}) (); }}Encore une fois, tout est pour les versions IE8 et plus anciennes.
1. Parce que son événement n'a pas d'attribut cible, seulement l'attribut Srcelement correspondant
2. Et cet événement de phrase = événement || window.Event; peut être omis ici. Uniquement lors de l'utilisation d'attributs pour définir l'écoute des événements d'enregistrement, tels que ul.onMouseOver = function () {}, ou <ul onMouseOver = 'func'>, ie8 et les versions anciennes ne peuvent obtenir l'objet de l'événement actuel que via Window.Event.
OK, maintenant que vous avez obtenu la cible de l'événement de déclenchement actuel, les choses sont beaucoup plus simples, à travers lesquelles vous pouvez changer vous-même et ses proches!
Ce qui suit est la fonction AUDUIner2, qui est déclenchée lors de la souris, manipule principalement l'élément enfant cible Div, le code est le suivant:
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.onmouseOver = function () {div1.style.display = 'block'; div1.style.opacity = 1; }; div1.onmouseout = function () {div1.style.display = 'Aucun'; div1.style.opacity = 0; }; div1.style.display = 'Aucun'; // Ce groupe doit masquer Div1 lorsque la souris sort d'en haut div1.style.opacity = 0; }}D'accord, maintenant, la plupart des effets ont été atteints, et il y a la dernière étape, c'est-à-dire la fonction Protagoniste n ° 1: écouteur3, qui est principalement responsable de l'effet de mise à l'échelle lorsque la souris est cliquée!
Principe de mise en œuvre:
1. Définissez une variable BOOL en dehors de la fonction en tant que commutateur, cliquez sur la souris et cliquez à nouveau sur le côté;
2. Utilisez Settimeout pour réaliser des effets d'animation, modifiez dynamiquement les attributs de hauteur et d'opacité du sous-menu et de l'attribut d'affichage;
Le code complet est le suivant:
var bool = true; Fonction écouteur3 (événement) {var event = event || window.event; var cible = event.target || event.srcelement; if (target.classname === 'show-hide') {var parent = cible.parerentelement; var adiv = parent.getElementsByClassName ('a-div') [0]; 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; Target.innerHtml = 'Financial-'; (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.opacity = option; adiv.style.display = 'block'; id = setTimeout (function () {cleartimeout (id); show ();}, 16.7);}) (); bool = false; } else {changeh = height; opacité = 1; Target.innerHtml = 'Financial +'; (fonction Hidden () {if (changeh <0) {ClearTimeout (id); adiv.style.display = 'nothe'; return} changeh - = 10; opacity - = 0.11; //console.log('opacity:'+adiv.style.opacity+',height: '+ adiv.style.height); adiv.style.opacity = opacity; id = settimeout (function () {cleartimeout (id); Hidden ();}, 16.7);}) (); bool = true; }}}Quelques points à noter:
1. N'oubliez pas d'effacer l'ID de Settimeout et de quitter, sinon la boucle morte est comme si (changeh <0) {cleartimeout (id); adiv.style.display = 'non'; return}
2. Le temps de retard de Settimeout est fixé à 16,7 car il répond au taux de rafraîchissement de l'écran 60fps, ce qui le rend confortable
3. Pendant le processus de débogage, lors de la définition des valeurs d'incrément et de diminution du changement et de l'opacité, n'oubliez pas de l'imprimer pour faciliter le débogage:
console.log ('opacité:' + adiv.style.opacity + ', hauteur:' + adiv.style.height);
4. Enfin, la chose la plus importante dans la mise en œuvre de l'ensemble du menu est la phrase suivante. Sans cette phrase, vous ne pouvez pas parfaitement implémenter toutes les fonctions. Par exemple: lorsque vous cliquez sur un groupe de sous-menu, puis passez à d'autres groupes, la situation sera très différente; La raison pour laquelle Window.getCompuledStyle l'utilise est que lorsque vous ouvrez la première fois, cliquer sur un groupe ne répond pas, car la valeur d'opacité ne peut pas être obtenue lors de la première cliqueté pour la première fois via event.target directement.
if (window.getCompuledStyle (adiv, null) .opacity> 0.5) {bool = false} else {bool = true};
Cependant, la méthode GetCompuledStyle n'est pas prise en charge ci-dessous IE9, et l'objet IE Element a la propriété CurrentStyle;
Si vous n'êtes pas très familier avec le traitement CSS, jetez un œil à mon résumé: Résumé de la façon de lire et d'écrire des styles CSS à l'aide de JS native
Si vous voulez en savoir plus sur l'application de la méthode setTimeout (), jetez un œil à ceci: savez-vous vraiment comment fonctionne Settimeout
Pour le mécanisme de gestion des événements, vous pouvez jeter un œil à ceci: aperçu de la gestion des événements dans DOM et une analyse complète des principes de gestion des événements dans DOM
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.