ZooMove Plugin jQuery, aby powiększyć obrazy na Hover

Jeśli kiedykolwiek przeglądałeś witrynę e-commerce, prawdopodobnie widziałeś efekt powiększania obrazu. Najedziesz na zdjęcie produktu, a ta część obrazu powiększy się o wyraźniejszy widok.

The Wtyczka ZooMove to świetny sposób na powtórz ten efekt na twojej stronie. Jego powered by jQuery, dzięki czemu możesz szybko to uzyskać i uruchomić bez większego kodu.

ZooMove jest całkowicie darmowy i dostępny jako open source na GitHub dla wszystkich ciekawych programistów. Może być zainstalowany przez npm, Altana, Przędza, lub pobrane bezpośrednio z CDNJS.

Aby skonfigurować obraz ZooMove, będziesz potrzebować trzy konkretne pliki w nagłówku strony:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Oba pliki ZooMove można zminimalizować jeśli chcesz szybciej ładować strony. Możesz także połączyć plik CSS z głównym arkuszem stylów, jeśli jest to łatwiejsze.

Cała prawdziwa magia dzieje się w HTML, gdzie możesz ustaw HTML5 atrybuty danych * dla różnych efektów.

Dzięki temu możesz stworzyć swój własny efekt powiększenia niestandardowego w oparciu o cztery różne parametry:

1. skala danych zoo - definiuje całkowity rozmiar zoomu po najechaniu (np. 2,0 za 200%)
2. dane-zoo-ruch - określa, czy obraz porusza się wraz z kursorem
3. dane-zoo-over - definiuje powiększony obraz pojawiają się nad oryginałem
4. kursor danych zoo - definiuje punkt kursora

Ostatni piąty parametr pozwala zdefiniować, co nowy adres URL obrazu powinno być (w razie potrzeby).

Możesz użyć ZooMove we wszystkich głównych przeglądarkach, w tym w IE9 +. Ta wtyczka jest szeroko wspierane i oferuje jeden kawał doświadczenia użytkownika.

Jeśli szukasz prosta biblioteka hover-to-zoom ZooMove to doskonały wybór. Jego wystarczająco lekki uruchomić na dowolnej stronie internetowej powered by jQuery, więc nie będziesz musiał pisać tak dużo kodu, aby działał.

Odwiedź stronę główną, aby zobaczyć ją w akcji i sprawdź dokumentację na GitHub, aby dowiedzieć się więcej.