jQuery iPhone-Effekte

Als JavaScript-Bibliothek erledigt jQuery viele komplexe Programmieraufgaben und reduziert so den Code, den Sie schreiben müssen. Mithilfe von jQuery kann Ihre Unternehmenswebsite die interaktiven und auffälligen Touchscreen-Grafiken des Apple iPhone simulieren. Durch das Hinzufügen eines jQuery-Plugins zu Ihrer Website können Sie beliebte iPhone-Effekte als Reaktion auf eine Computermaus reproduzieren.

Streichen

Wenn Sie das Wort „iPhone“ hören, kann Ihnen auch das Wort „Wischen“ einfallen, wenn Sie mit Ihrem Finger über den Bildschirm eines iPhones streichen, um dessen Inhalt zu bearbeiten. Sie können diesen Effekt mit dem Overscroll jQuery-Plugin von Azoff Design reproduzieren, das durch Klicken auf den Link "Zip-Archiv" im Bereich "Download the source" der Website gefunden wird. Nach dem Herunterladen der ZIP-Datei müssen Sie sie entpacken, um eine JavaScript-Datei mit dem Namen Jquery.overscroll.min.js anzuzeigen. Um dies zu Ihrer Webseite hinzuzufügen, müssen Sie die folgende Anweisung in den Kopfabschnitt Ihres Dokuments einfügen:

Sie können dann dem Hauptabschnitt Ihres Dokuments einen Div-Block hinzufügen, ähnlich dem unten aufgeführten:

Der Wert "div1" muss mit der ID des div im Hauptteil des Dokuments übereinstimmen. Nachdem Sie Ihre Webseite in einem Browser gestartet haben, können Sie auf das div klicken, um es zu verschieben, wenn der Inhalt des div die Dimensionen überschreitet.

Wackeln

Einer der subtilsten, aber eindrucksvollsten iPhone-Effekte tritt auf, wenn Sie ein Symbol einige Sekunden lang gedrückt halten: Es wackelt, bis Sie es erneut drücken, wodurch Sie einen visuellen Hinweis erhalten, dass Sie das Symbol ausgewählt haben. Sie können diesen Effekt mit dem jQuery Wiggle-Plugin von UserDot Ihrer Webseite hinzufügen. Nach dem Download finden Sie mehrere Dateien und Unterordner im Download-Ordner. Auf Ihren Webserver kopiert, verwackeln diese Dateien und Ordner jedes Bild, wenn Sie darauf klicken, indem Sie ihm eine ID wie "wackeln" geben, wie im folgenden Beispiel gezeigt:

Nach dem Hinzufügen dieses Image-Tags müssen Sie den folgenden Code auch in den Skriptabschnitt Ihres Dokuments einfügen:

$ (document) .ready (function () {var Intervall = null; $ ('# wiggle'). click (function () {if ($ (this) .wiggle ('isWiggling')) {$ (this). wiggle ('stop');} else {$ (this) .wiggle ('start');}};});

Die Click-Funktion in der dritten Anweisung verweist auf den gleichen ID-Wert für "wackeln", der im img-Tag angegeben ist. Durch Hinzufügen des folgenden Skript-Tags zum Kopfabschnitt des Dokuments wird der Installationsvorgang abgeschlossen:

Wenn Sie Ihre Seite in einem Browser anzeigen, wird ein Bild, auf das Sie klicken, so lange gewackelt, bis Sie erneut darauf klicken. Das iWiggle-Plugin verwendet einen Cascading Style Sheet-Rotateffekt, der ab Version 2012 in der neuesten Version von Firefox, Safari, Chrome und Opera sowie in Internet Explorer 10 funktioniert.

Bildzoom

Bilder machen Seiten interessant und können Personen dabei helfen, Elemente detaillierter anzuzeigen. Wenn Sie auf ein iPhone-Bild tippen, wird es vergrößert. Durch erneutes Antippen wird die ursprüngliche Größe wiederhergestellt. Einen ähnlichen Effekt erzeugen Sie mit Mausklicks auf Ihrer Webseite, indem Sie den folgenden jQuery-Code zum Skriptabschnitt Ihres Dokuments hinzufügen:

$ (document) .ready (function () {var dauer = 400; var zoomed = false; // $ ("# image"). click (function () {

// Zoomed if (zoomed == false) {zoomed = true; $ ("# image"). animieren ({height: 400}, Dauer); $ ("# image"). animieren ({width: 430}, Dauer); }

// normale Größe else {zoomed = false; $ ("# image"). animieren ({height: 200}, Dauer); $ ("# image"). animieren ({width: 215}, duration); }}); });

Dieser Code ruft die jQuery-Animationsfunktion auf, durch die sich Höhe und Breite eines Bildes ändern, wenn Sie darauf klicken. Die Werte 400 und 430, die im Abschnitt „Zoomed Size“ angezeigt werden, beziehen sich auf die Größe, die das Bild beim Zoomen annimmt, während die Werte für „Normal Size“ die normale Höhe und Breite des Bildes widerspiegeln. Sie können diese Werte beliebig ändern, und Sie können den Wert der in diesem Beispiel auf 400 eingestellten Dauer-Variable ändern. Dieser Wert bestimmt in Millisekunden, wie lange das Bild zum Zoomen oder zur normalen Größe benötigt. Bei höheren Werten wird das Bild langsamer gezoomt. Nachdem Sie das img-Tag unten in den Textabschnitt Ihres Dokuments eingefügt haben, können Sie es über Ihren Webbrowser testen:

Der ID-Wert des Bildes ist in diesem Beispiel „Bild“, aber der Name muss mit dem Namen übereinstimmen, der in den Aufrufen der Animationsfunktion im jQuery-Code verwendet wird.

Überlegungen

Wenn Sie jQuery auf einer Webseite verwenden, müssen Sie die folgende Anweisung in den Kopfabschnitt des Dokuments einfügen, um die grundlegende jQuery-Codebibliothek zu verknüpfen und Plugins die Verwendung zuzulassen:

Wenn Sie dem Kopfabschnitt Ihres Dokuments ein jQuery-Plugin-Skript hinzufügen, sollte es nach der oben beschriebenen Anweisung angezeigt werden. Durch das Durchsehen der Hilfedokumentation, die mit den Plugins geliefert wird, werden konfigurierbare Optionen angezeigt, mit denen Sie die Art und Weise anpassen können, in der Plugins ihre Effekte generieren.

Empfohlen

So machen Sie Webseiten offline für Firefox verfügbar
2019
So vermeiden Sie eine Kontosperre auf Craigslist
2019
Was sind die Vorteile der Wertanalyse?
2019