Wie ein Bild Hover-Vorschau Effekt mit jQuery erstellen
Zunächst werden wir ein Stylesheet und benennen Sie die Datei styles.css erstellen. speichern Sie es dann zu einem Unterverzeichnis namens CSS unter dem Web-Verzeichnis. Diese werden definieren, den Körper, die Hauptklasse, die Galerie Klasse, h1, h2, Anker, vor, Bild, ungeordnete Liste und Listenelemente und die Vorschau-ID. Ich werde im Detail mehr spezifischen Styling Definitionen beschreiben, wie sie unten auf mehr diese Elemente anzuwenden. Der CSS-Code enthält auch mehrere CSS3 Stylings für Box Schatten und Text Schatten; der Code innerhalb des Stylesheet enthalten ist unten dargestellt:
Als nächstes werden wir die Bilder einrichten, die für die Demonstration verwendet werden, und diese werden in einem Web-Unterverzeichnis namens Bildern enthalten sein. Jedes Bild erfordert das Original, das in dieser Demonstration auf eine Breite von 400 Pixeln und eine Höhe von 320 Pixel festgelegt ist, ändern und die Miniaturbild werden auf 100 x 80, gespeichert als JPGs (ex. 1t.jpg). Die Bilder in dieser Demonstration verwendeten Lager Clip-Art (frei), in Abbildung A angezeigt
Beachten Sie die Skript Quelle verweist auf das „js“ Unterverzeichnis, die im Web-Verzeichnis enthalten ist. Dies ist die jQuery-Quelldatei, die für den jQuery-Skripte benötigt wird innerhalb des Dokuments zu laufen.
Als nächstes erstellen wir eine
Als nächstes werden wir die x gesetzt und y-Offset-Konfigurationen, die die horizontalen und vertikalen Einstellungen festgelegt werden, die, wie weit und wie weit rechts von der Miniatur die Bildvorschau angezeigt wird gelten. Der Code-Snippet wird angezeigt unter:
Die xOffset = -20 bringt die Vorschau um 20 Pixel in Bezug auf die Miniaturansicht und die yOffset = 40 bringt die Vorschau auf der rechten Seite 40 Pixel in Bezug auf das verkleinerte Bild.
Der nächste Code-Schnipsel setzt die Hover-Funktion zusammen mit dem Titel Titel; es setzt auch die Versätze und die Fade-in zu verlangsamen.
Die nächsten Funktionen entfernen Sie die Vorschau und den Titel Titel, wenn der Hover außerhalb des Bildbereichs ist, zusammen mit dem „mousemove-“, die die Vorschau in Bezug auf entlang bewegen kann, wo der Cursor innerhalb der Miniaturansicht ist, und schließlich die Schließung Skript tag:
Die Endbild Galerie wie in Chrome 18.0.1 angezeigt wird in Abbildung B dargestellt
Und als nächstes ein Beispiel für den Hover-Vorschau-Effekt über die zweite Landschaftsbild, wie in Abbildung C gezeigt
Auch hier können Sie alle Dateien für diese Demo der Bildvorschau hier Wirkung herunterladen.
Für weitere Lesung, überprüfen Sie diese Ressourcen: