Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

Ajax / Javascript Tutorial: jQuery Flip-Effekt



Ranking: +1   Kommentare: 0   |   Bewertung: Keine Berechtigung!  

Mittels der .animate() - Funktion von jQuery bauen wir uns nun einen Flip-Effekt zusammen. Und zwar sowohl vertikal als auch horizontal.

Wer nicht weiß wovon ich hier rede. Am Ende seid ihr in der Lage Bilder dahingehend zu animieren, dass der Anschein entsteht, als würden sie sich 3-dimensional drehen/flippen.

Eins Vorweg, es gibt zwar bereits einige Plugins dafür, jedoch möchte ich hier einfach die Funktionsweise erleutern.
Die Animation wird hier auf alle im Dokument befindlichen Bildelemente anwendbar sein; wenn nur einzelne angesprochen werden sollen, muss jQuery nur gesagt werden, dass er anstatt "img z.b. "#ID" o.ä. nehmen soll.
Nun gut.

Html


Wir erstellen ein leeres HTML-Grundgerüst.
In den <head>-Bereich muss noch die jQuery-Datei eingebunden werden.

Code:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>



Nun fügen wir ein Bild ein (egal welche Größe).
Als Attribut bekommt dieses nur das src-Attribut (evtl ID/Class).

Code:


<img src="Pfad/zum/Bild">



jQuery



Nun kommen wir zum "spannenden" Teil:

Zuerst müssen wir jQuery sagen, dass es erst "loslegen" soll, wenn das die Seite fertig geladen ist (ansonsten greift es evtl auf noch nicht geladene Elemente zurück, was entweder Fehlermeldungen oder Fehlfunktionen ausgibt).

Dies geht mit jQuery wie folgt:

Code:


$(document).ready(function(){



//hier kommt der gesamte Code rein



}); 




Hätten wir das schonmal geschafft. Nun müssen wir ein paar Variablen deklarieren, mit dem unsere Flip-Funktion arbeiten kann.
Was benötigen wir?
Klar: Höhe und Breite des Bildes!
Wie bekommen wir diese? wir haben die doch vorher nicht angegeben!
Nichts einfacher als das, jQuery bringt auch hierfür alles nötige von Haus aus mit.

Code:




var imgHeight = $("img").height(); //ermittelt die Höhe des ersten Bild-Elementes der Seite und speichert diese in imgHeight

var imgWidth = $("img").width(); //ermittelt die Breite des ersten Bild-Elementes der Seite und speichert diese in imgWidth

var animHeight = imgHeight / 2; //errechnet den vertikalen Bildmittelpunkt und speichert diesen in animHeight

var animWidth = imgWidth / 2; //errechnet den horizontalen Bildmittelpunkt und speichert diesen in animWidth




Nun haben wir alle Vorbereitungen getroffen und können uns in Ruhe den beiden Funktionen (horizontal und vertikal) widmen.
Diese lassen wir mittels eines Eventhandlers auslösen

Horizontal

Code:




$("img").click(function(){

$(this).animate({"width":"0","height"animWidth},

//Halbzeit :D

function(){$(this).animate({"width""0"})});

});




Vertikal

Code:




$("img").click(function(){

$(this).animate({"width"0,"margin-top":animHeight},

//Halbzeit :D

function(){$(this).animate({"height""0"})});

});





Soll z.b. 1 Bild horizontal und eins vertikal geflippt werden, so muss am Eventhandler noch eine kleine "Modifikation" getätigt werden.

Code:


$("img:nth(ZAHL).click



Die Zahl wird durch die Nummer des entsprechenden Bildes ersetzt. Die Bilder sind von links oben nach rechts unten durchnummeriert, beginnend bei 0 . D.h. Das erste Bildelement der Seite besitzt die Nummer 0, das Zweite die Nummer 1 usw....


Hier http://fpvz.fp.ohost.de/jqflip.html kann man das ganze nochmal in Aktion erleben.

Das wars auch schon...

Veröffentlicht von: vanDerb
Veröffentlicht am: 12 Oct. 2010
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: Animation flip jQuery


Themenverwandte Tutorials


Kommentar(e) (0)


Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder