ZooMove jQuery Plugin zum Zoomen von Bildern im Hover

Wenn Sie jemals eine E-Commerce-Website durchsucht haben, haben Sie wahrscheinlich die Bild-Zoomeffekt. Sie schweben ein Produktfoto, und der Teil des Bildes wird vergrößert klarere Sicht.

Das ZooMove-Plugin ist ein guter Weg zu replizieren Sie diesen Effekt auf deiner Seite. Es ist bereitgestellt von jQuery, So können Sie dies schnell und ohne viel Code einrichten.

ZooMove ist komplett kostenlos und Open Source verfügbar auf GitHub für alle neugierigen Entwickler. Es kann durch installiert werden npm, Laube, Garn, oder direkt heruntergeladen von CDNJS.

Um ein ZooMove-Image einzurichten, benötigen Sie drei spezifische Dateien in Ihrem Seitenkopf:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Beide ZooMove-Dateien kann minimiert werden Wenn Sie ein schnelleres Laden der Seite wünschen. Sie können die CSS-Datei auch in Ihrem Haupt-Stylesheet kombinieren, wenn dies einfacher ist.

Die eigentliche Magie geschieht im HTML-Bereich, wo Sie können setze HTML5 Daten- * Attribute für die verschiedenen Wirkungen.

So können Sie Ihre fertigen eigener Zoomeffekt basierend auf vier verschiedenen Parametern:

1. Daten-Zoo-Skala - definiert das Zoom-Gesamtgröße beim Schweben (z. B. 2,0 für 200%)
2. Daten-Zoo-Umzug - legt fest, ob das Bild bewegt sich mit dem Cursor mit
3. Daten-Zoo-over - Definiert das vergrößerte Bild über dem Original erscheinen
4. Daten-Zoo-Cursor - definiert das Cursorpunkt

Ein letzter fünfter Parameter lässt Sie definieren, was der neue Bild-URL sollte sein (wenn nötig).

Sie können ZooMove in allen gängigen Browsern verwenden, einschließlich IE9 +. Dieses Plugin ist weitgehend unterstützt und es bietet eine Mühe von Benutzererfahrung.

Wenn Sie nach einem suchen einfache Hover-to-Zoom-Bibliothek ZooMove ist eine ausgezeichnete Wahl. Es ist leicht genug auf jeder Website laufen und es ist bereitgestellt von jQuery, Sie müssen also nicht so viel Code schreiben, damit es funktioniert.

Besuchen Sie die Hauptseite, um sie in Aktion zu sehen, und lesen Sie die Dokumentation zu GitHub, um mehr zu erfahren.