5 Darmowe skrypty do porównywania obrazów
Nakładane suwaki umożliwiają dokonywanie porównań między dwoma obrazami, zazwyczaj typu „po”, z dwoma obrazami nałożonymi na siebie. Suwak, którym można manipulować, może być przeciągany przez użytkownika, aby pokazać mniej obrazu przed i więcej obrazu po i odwrotnie.
Jest to idealny sposób na pewne scenariusze, takie jak oglądanie ostrych efektów atmosfery Marsa lub zmiana krajobrazu miasta w ciągu pół wieku.
Dla projektantów jest to również świetny sposób na zastanowienie się nad zmianą, jaką ma technika lub podejście do oryginalnego obrazu. Istnieją różne biblioteki JS, których można użyć do celów porównawczych. Oto 5 z nich.
Dwadzieścia dwa lata
Dwadzieścia dwa lata to narzędzie wizualne ułatwiające zauważenie różnic między dwoma obrazami. To narzędzie wykorzystujące jQuery i jquery.event.move do pracy. Jest bardzo łatwy w użyciu, wystarczy umieścić dwa obrazy w pojemniku, a następnie zadzwonić twentytwenty (); dla pojemnika.
Następnie:
$ („# kontener”). twentytwenty ();
Twentytwenty jest responsywny i działa na wszystkich urządzeniach, a jeśli korzystasz z frameworku Foundation, będzie działać od razu.
Zestawić ze sobą
Zestawić ze sobą pomaga porównać dwa elementy multimedialne (zdjęcia lub GIF) i ułatwia podkreślenie zmian między obrazami w czasie. Ta wtyczka jest łatwa w użyciu i działa na wszystkich urządzeniach. Wystarczy podać dwa obrazy, a następnie wywołać wtyczkę z dostępnymi opcjami.
W opcjach możesz ustawić pozycję początkową suwaka, ustawić go pionowo lub poziomo, dodać etykietę i kredyt, animację i wiele innych.
Wypróbuj demo poniżej:
imgSlider
imgSlider jest prostą wtyczką jQuery do tworzenia suwaka porównania obrazów. Użycie jest proste i łatwe: po włączeniu JS i CSS, zawiń obrazy w div za pomocą lewo klasa dla przed obraz i dobrze klasa dla po obraz, a następnie aktywuj go dzwoniąc .suwak();. Opcje wtyczki obejmują ustawienie początkowej pozycji suwaka oraz dodawanie / pokazywanie instrukcji na suwaku.
Zadzwoń do wtyczki:
$ ('. suwak'). suwak (); 
Cocoen
Cocoen umożliwia dotyk za pomocą wydarzenia jQuery-Touch. Jest łatwa do zastosowania ze względu na strukturę HTML podobną do Dwadzieścia dwa lata podłącz. Na stosie skryptów, oprócz jQuery, musisz dołączyć bibliotekę jQuery Touch Event, obok tej wtyczki.
$ (document) .ready (function () $ ('. cocoen'). cocoen (););
Wypróbuj demo poniżej:
Suwak porównania obrazów
CodyHouse stworzył demo suwaka porównania obrazów z CSS3, jQuery i niektórymi skryptami do obsługi zdarzenia przeciągania i dodawania obsługi mobilnej. Możesz śledzić pełne wyjaśnienia i instrukcje korzystania z tej wtyczki tutaj i zobaczyć tutaj demo.
Wypróbuj demo poniżej:
Oto 3 więcej:
Cato - Inne wtyczki wymagają jQuery jako zależności, ale Cato nie wymaga żadnej zależności od pracy, co czyni ją bardziej lekką biblioteką dla suwaków do porównywania obrazów. Użycie jest łatwe, wystarczy dołączyć bibliotekę CSS i JS Cato i postępować zgodnie z jej strukturą HTML.
Dostępne są opcje, które można zastosować na suwaku, w tym dodanie podpowiedzi, zmiana kierunku suwaka, a nawet dodanie efektu filtra, takiego jak sepia i skala szarości. Należy jednak pamiętać, że Cato obecnie obsługuje tylko WebKit.
Przed po - Jest lekki, w pełni responsywny i działa na dowolnym układzie i rozmiarze. Możesz zobaczyć prezentacje na żywo na Codepen.
Suwak porównania wideo HTML5 - Gdy inni programiści próbują zrobić suwak porównania dla obrazów, Dudley Storey zastosuje suwak do wideo. Aby wykonać pracę, korzysta z jQuery i zaledwie kilku linii kodu. Zobacz demo na Codepen, aby zobaczyć akcję.
