jQuery von Kopf bis Fuß (German Edition)

die
blitz_eins
-Funktion alle vier Sekunden ausgeführt werden soll, und weist sie der Variablen
int1
zu.
$("#container #blitz1").fadeIn(250).delay(5000).fadeOut(250).;
Stellt fest, wann das aktuelle Fenster den Fokus verliert, und ruft die
blitze_anhalten
-Funktion auf.
int1 = setInterval( function() {
     blitz_eins();
     },
     4000
     );
Löscht den Timer und stoppt die wiederholte
setInterval
-Funktion für
int1
.
window.onblur = blitze_anhalten;
Erzeugt eine Pause von fünf Sekunden zwischen einem
fadeIn-
und einem
fadeOut
-Effekt.
    Wer Macht Was? Lösung
    Verbinden Sie die verschiedenen Timer-Methoden mit der passenden Beschreibung.

Schreiben Sie die Funktionen blitze_anhalten und blitze_starten
    Jetzt, wo Sie mehr über Timer-Methoden wissen, wollen wir noch einmal den Code betrachten, in dem sie gebraucht werden.

    Übung
    Ergänzen Sie die leeren Zeilen um die Variable, Funktion oder Methode, die hier Ihrer Meinung nach gebraucht wird, um die Monstermacher-Applikation wieder zum Laufen zu bringen. Wenn Sie nicht weiterwissen, werfen Sie noch einen Blick auf die vorige Seite. Ein paar Zeilen haben wir schon für Sie ausgefüllt.
    Lösung zur Übung
    Jetzt haben Sie zwei neue Funktionen, die auf die
onfocus
- und
onblur
-Events reagieren. Beide verweisen auf die Blitzfunktionen, die Sie bereits in Kapitel 5 erstellt haben.
    Tun Sie das hier!
    Um das Programm aus Kapitel 5 zu reparieren und zu erweitern, müssen einige Dateien geändert werden. Am besten beginnen wir mit einer leeren Skriptdatei. Bei den Beispieldateien zu diesem Buch gibt es auch einen Ordner für Kapitel 7 . Darin finden Sie den Ordner begin , der folgendermaßen aufgebaut ist:

    Probefahrt
    Wenn Sie den Code von der vorigen Seite in Ihre Skriptdatei übertragen haben, sollten Sie die Seite index.html in Ihrem Browser öffnen, um zu sehen, ob die Raparatur des Blitzeffekts erfolgreich war.

    Sehr gute Idee! Wir haben ein paar Klickfunktionen für das Gesicht, die wir möglicherweise zu einer wiederverwendbaren Funktion für alle Gesichtsteile kombinieren können.

    jQuery-Magneten
    Finden Sie heraus, welche Teile des Codes auf der gegenüberliegenden Seite für alle Aspekte der Applikation gleich sind. Verwenden Sie die Magneten unten auf dieser Seite, um eine allgemeine Funktion namens
gesicht_bewegen
zu definieren, die aufgerufen wird, wenn der Benutzer eines der beweglichen Bilder anklickt. Der erste Parameter für die Funktion
gesicht_bewegen
ist der Index im neu definierten Array
klicks
, der zweite ist eine Referenz auf das angeklickte Element.
    jQuery-Magneten: Lösung
    Jetzt haben Sie eine Array-basierte Funktion, die wiederverwendet werden kann. Dadurch müssen Sie weniger Code pflegen, und mögliche Fehler lassen sich leichter finden und beheben.
    Probefahrt
    Bauen Sie den Code aus der Magnetenlösung von der vorigen Seite in Ihre Datei meine_skripts.js ein. Danach sollten Sie die Datei index.html in Ihrem Browser öffnen und überprüfen, ob die neu geschriebene Funktion keine neue Probleme verursacht, wenn die verschiedenen Teile des Gesichts angeklickt werden.

Neue Funktionen für die Monstermacher
    Jill und ihr Qualitätssicherungsteam sind sehr zufrieden mit Ihren Anpassungen. Und weil sie Ihre Arbeit schätzen, geben sie gleich noch einen Funktionswunsch des Produktteams an Sie weiter.

Noch mehr Zufall ...
    Im Verlauf dieses Buches haben Sie immer wieder mit Zufallsfunktionen gearbeitet. Mittlerweile sind Sie bestimmt schon ein Profi auf diesem Gebiet. Hier brauchen wir eine Funktion, die ein zufälliges Monstergesicht erstellt. Am besten gehen wir hier nach dem Prinzip »Teile und herrsche« vor, indem wir das Problem in kleine Schritte unterteilen. Zunächst müssen wir die aktuelle Position für die einzelnen Bildstreifen ermitteln.

    Ausgehend von der aktuellen Position müssen wir die Zielposition ermitteln. Das ist im Prinzip eine zufällige Position auf dem Bildschirm. Am besten stellen Sie sich das in zwei Teilen vor:
    Eine Zufallszahl erzeugen
Basierend auf der Zufallszahl sollen die einzelnen Gesichtsteile an eine zufällige Position verschoben werden.

    Das ist leichter, als Sie denken.
    Die Lösung finden Sie gleich auf der nächsten Seite ...

Sie kennen die aktuelle Position schon ...
    Zum Glück brauchen Sie sich hier nicht noch mehr neue Variablen und Funktionen auszudenken. Der Index-wert des
klicks
-Arrays enthält die aktuelle Position bereits, weil hier gespeichert ist, wie oft der Besucher den jeweiligen