Obwohl es viele Plug-Ins gibt, um sich gemeinsam zu verbessern, habe ich eine Reihe von Beispielen für die praktische JavaScript-Serie gemacht und Ihnen geteilt. Wenn Sie gute Vorschläge haben, verweisen Sie diese bitte darauf, dass Sie Ihre Kinder nicht irreführen!
Heute ist der erste Kampf: Ein Menü mit einem Animationseffekt für Sammlung und Release. Der Effekt ist wie folgt: (Der Stil ist etwas hässlich (-^-))
(Da ich beim Schreiben dieses Artikels verschiedene Redakteure verwendet habe, kann der Demo -Effekt vorerst nicht hinzugefügt werden. Hier sind: Der endgültige vollständige Code und die endgültige Demonstration)
Animationseffekt: Der Maus -Schweber ändert die Hintergrund- und Schriftfarbe aller Ziele, verschieben Sie die Maus in die "Homepage -Navigation" und zeigen Sie das Gruppierungsmenü unten an. Das Gruppierungsmenü verfügt über ein Untermenü. Klicken Sie auf Zoom, was zu übermäßigen Animationseffekten führt! Darüber hinaus können Sie Navigationsmenüs und Untermenüs nach Belieben hinzufügen und löschen, ohne den Effekt zu beeinflussen!
Wie kann man es erreichen?
Schritt 1: Was kann man zum Implementieren des Menüs verwenden? Der HTML -Code ist wie folgt entworfen, nach dem Prinzip der Trennung von JS -Code und HTML -Code! Sie können hier keinen JS -Code sehen
So sah es aus, bis der Stil angewendet wurde: Es war sehr alt! ! !
Schritt 2: CSS -Stil. Mausschwebede ändert die Hintergrund- und Schriftfarbe aller Ziele und verwendete den CSS -Übergang direkt und: schweben. Wir werden jedoch nicht alle anderen Layouts im CSS -Stil auflisten. Lass es uns selbst machen. Achten Sie auf die folgenden Punkte:
#ul {.... Z-Index: 100; } #ul li {display: Inline-Block; Position: Relativ; Top: 0; links: -25px; Breite: 10%; Min-Width: 70px; Höhe: 30px; Text-Align: Mitte; Zeilenhöhe: 30px; Grenze: 1px Festgrau; Border-Radius: 10px; 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; Farbe: rot;} ... .how-hide: hover {Hintergrundfarbe: Beige} .a-div {Hintergrundfarbe: Aquamarin; Border-Radius: 10px; Farbe: Schwarz; Anzeige: Keine; Opazität: 0} .A {Z -Index: -1; Anzeige: Block; ...}Schritt 3: Dieser Schritt ist der Schlüsselpunkt. Wenn Sie Ereignisse hinzufügen, die jede Menüoption und Gruppierung anhören, denke ich persönlich, dass es sich um eine Menge Ärger handelt, und die Menge an Code muss größer oder weniger sein. Gibt es eine Möglichkeit, einem Element eine Überwachung hinzuzufügen, um es zu erreichen?
Es muss eine Antwort geben, wobei der sprudelnde Mechanismus von Ereignissen verwendet wird! Fügen Sie das Ereignis hinzu, das das übergeordnete Element UL -Tag -Tag -Tag -Tag -Hörstil des Elementstils des Triggerereignisses in der Hörfunktion direkt ändern wird. Es ist so einfach!
Der Code ist wie folgt:
var ul = document.getElementById ('ul'); ul.addeventListener ('mouseover', listener1, falsch); ul.addeventListener ('Mausout', Listener2, Falsch); ul.addeventListener ('click', listener3, false);Da IE8 und folgende Versionen keinen AddEventListener haben, müssen Sie den entsprechenden Code von AttachEvent hinzufügen, wenn Sie kompatibel sein möchten.
Schritt 4 : Der Protagonist erscheint! Implementieren Sie Listener1, Listener2, Listener3 Hörfunktionen.
Nehmen wir zunächst die einfachste Funktion Listener1, der Code lautet wie folgt:
Funktion Listener1 (Ereignis) {// Event = 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'; var i = 0; var id; (Funktion foo () {if (i> = 1) {clearimeout (id); id = null; return;} i+= 0,2; div1.style.opacity = i; id = setTimeout (function () {clearimeout (id); foo ()}, 30);}); }}Auch hier ist alles für IE8 und ältere Versionen.
1. Da sein Ereignis kein Zielattribut hat, nur das entsprechende SRCelement -Attribut
2. und dieses Satzereignis = Ereignis || window.event; kann hier tatsächlich weggelassen werden. Nur wenn Attribute zum Hören von Registrierungsereignissen festgelegt werden, wie z.
OK, jetzt, da Sie das Ziel des aktuellen Triggerereignisses erhalten haben, sind die Dinge viel einfacher, durch das Sie sich und seine Verwandten ändern können!
Das Folgende ist die Listener2 -Funktion, die beim Mausout ausgelöst wird, hauptsächlich das Zielkind -Element -DIV, der Code lautet wie folgt:
Funktion Listener2 (Ereignis) {// event = event || window.event; var target = event.target || event.srcelement; if (target.tagname.tolowerCase () === 'li') {var div1 = target.getElementsByTagName ('div') [0]; div1.onmouseover = function () {div1.style.display = 'block'; Div1.Style.Opacity = 1; }; div1.onmouseout = function () {div1.style.display = 'none'; Div1.Style.Opacity = 0; }; div1.style.display = 'none'; // Diese Gruppe soll Div1 verstecken, wenn die Maus von oben div1.style.opacity = 0 ausgeht; }}Okay, inzwischen wurden die meisten Effekte erzielt, und es gibt den letzten Schritt, dh die Protagonist Nr. 1: Listener3 -Funktion, die hauptsächlich für den Skalierungseffekt verantwortlich ist, wenn die Maus geklickt wird!
Implementierungsprinzip:
1. Definieren Sie eine BOOL -Variable außerhalb der Funktion als Switch, klicken Sie auf die Maus und klicken Sie erneut auf den Ausgang.
2. Verwenden Sie SetTimeout, um Animationseffekte zu erzielen, dynamisch die Attribute der Höhe und Opazität des Untermenüs und des Anzeigeattributs zu ändern.
Der vollständige Code lautet wie folgt:
var bool = true; Funktion Hörer3 (Ereignis) {var event = Ereignis || Fenster.Event; var target = event.target || event.srcelement; if (target.className === 'show-hide') {var parent = target.Parentelement; var adiv = parent.getElementsByClassName ('a-div') [0]; 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; Target.InnerHtml = 'Financial-'; (Funktion show () {if (ChangeH> Höhe) {ClearTimeout (ID); return} changeH += 5; Opazität += 0,06; //console.log('opacity:'Sadiv.style.Opacity+'.Height: ' +adiv.style.height); adiv.Style.Display = 'Block'; bool = falsch; } else {ChangeH = Höhe; Opazität = 1; Target.InnerHtml = 'Financial+'; (Funktion hidden () {if (changeH <0) {ClearTimeout (id); adiv.style.display = 'none'; return} changeH -= 10; opacity -= 0.11; //console. adiv.Style.opacity = opacity; bool = wahr; }}}Ein paar Punkte zu beachten:
1. Denken Sie daran, die ID von SetTimeout und Ausgang zu löschen. Andernfalls ist die tote Schleife wie if (ChangeH <0) {ClearTimeout (ID); adiv.style.display = 'None'; return}
2. Die Verzögerungszeit von SetTimeout ist auf 16,7 festgelegt
3. Während des Debugging -Prozesses, wenn Sie die Inkrement- und Dekrementwerte von ChangeH und Deckkraft festlegen, denken Sie daran, sie auszudrucken, um das Debuggen zu erleichtern:
console.log ('opacity:'+adiv.style.opacity+', Höhe:'+adiv.style.height);
4. Schließlich ist das Wichtigste bei der Implementierung des gesamten Menüs der folgende Satz. Ohne diesen Satz können Sie nicht alle Funktionen perfekt implementieren. Zum Beispiel: Wenn Sie auf eine Gruppe von Untermenü klicken und dann zu anderen Gruppen wechseln, ist die Situation sehr unterschiedlich. Und der Grund, warum Window.GetComputedStyle dies verwendet, ist, dass beim ersten Mal, wenn Sie auf eine Gruppe klicken, nicht antwortet, da der Wert der Opazität nicht erhalten werden kann, wenn Sie das erste Mal über Ereignis klicken.
if (window.getComputedStyle (adiv, null) .oopacity> 0.5) {bool = false} else {bool = true};
Die GetComputedStyle -Methode wird jedoch unten nicht unterstützt, IE9, und das IE -Element -Objekt hat die aktuelle Eigenschaft.
Wenn Sie mit der CSS -Verarbeitung nicht sehr vertraut sind, schauen Sie sich meine Zusammenfassung an: Zusammenfassung des Lesens und Schreibens von CSS -Stilen mit nativem JS
Wenn Sie mehr über die Anwendung der setTimeout () -Methode erfahren möchten, sehen Sie sich Folgendes an: Wissen Sie wirklich, wie SetTimeout funktioniert
Für den Mechanismus zur Bearbeitung des Events können Sie sich dies ansehen: Überblick über die Ereignishandhabung in DOM und eine umfassende Analyse der Prinzipien der Ereignisbearbeitung in DOM
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.