5 Безплатни Скриптове за Плъзгача за Сравнение на Изображения
Накланящите се плъзгачи ви позволяват да правите сравнения между две изображения, обикновено преди преди, като двете изображения се наслагват един върху друг. Плъзгачът, който може да се манипулира, може да бъде преместен от потребителя, за да покаже по-малко от предишното изображение и повече от изображението след, и обратно.
Това е идеалният начин за някои сценарии, като например преглед на суровите ефекти на атмосферата на Марс или как градските пейзажи се променят в продължение на половин век.
За дизайнерите това също е чудесен начин да се отразява на размера на промяната, която техниката или подходът има върху оригиналното изображение. Има различни библиотеки JS, които можете да използвате за целите на сравнението. Ето 5 от тях.
Twentytwenty
Twentytwenty е визуален инструмент, който улеснява отбелязването на разликите между две изображения. Този инструмент използва jQuery и jquery.event.move за работа. Той е много лесен за използване, просто подредете две изображения в контейнер, след това се обадете twentytwenty (); за контейнера.
Тогава:
$ ( "# Контейнер") twentytwenty (.);
Twentytwenty е отзивчив и работи за всички устройства, и ако използвате рамката на Фондацията, това ще работи извън полето.
съпоставям
съпоставям ви помага да сравните две части от медията (снимки или GIF) и да улесните да подчертаете промяната между изображенията във времето. Този плъгин е лесен за използване и работи на всички устройства. Просто предоставете две изображения, след което извикайте плъгина с наличните опции.
При опциите можете да зададете началната позиция на плъзгача, да я настроите вертикално или хоризонтално, да добавите етикет и кредит, анимация и др.
Опитайте демонстрация по-долу:
imgSlider
imgSlider е прост плъгин jQuery, за да направите слайдер за сравнение на изображения. Използването е просто и лесно: след включването на JS и CSS, увийте изображенията в div с наляво клас за преди изображение, и прав клас за след след това го активирайте, като се обадите .плъзгач ();. Опциите на плъгина включват задаване на първоначалната позиция на плъзгача и добавяне / показване на инструкции за плъзгача.
Обадете се на приставката:
$ ( ". Слайдер") плъзгач (.);
Cocoen
Cocoen позволява докосване с използването на jQuery-Touch събитие. Лесно е да се приложи поради HTML структура, подобна на Twentytwenty плъгин. В стека на скрипта, освен jQuery, трябва да включите и библиотеката jQuery Touch Event, заедно с този плъгин..
$ (document) .ready (функция () $ ('. cocoen'). cocoen (););
Опитайте демонстрация по-долу:
Плъзгач за сравнение на изображения
CodyHouse направи демонстрация на плъзгач за сравнение на изображения с CSS3, jQuery и някои скриптове, за да се справят с плъзгащото събитие и да добавят мобилна поддръжка. Можете да следвате пълното обяснение и инструкции за използването на този плъгин тук и да видите демото тук.
Опитайте демонстрация по-долу:
Ето още 3:
Катон - Други плъгини се нуждаят от jQuery като зависимост, но Катон не изисква зависимост от работата, което го прави по-лека библиотека за плъзгачи за сравнение на изображения. Използването е лесно, просто включете CSS и JS библиотеката на Cato и следвайте HTML структурата му.
Има опции, които можете да приложите на вашия плъзгач, включително добавяне на подсказка, промяна на посоката на плъзгача, дори добавяне на ефект на филтър като сепия и сиво. Все пак трябва да имате предвид, че Cato в момента поддържа само WebKit.
Преди след - Това е лек, напълно реагиращ и работи на всякакви оформления и размери. Можете да видите демонстрациите на живо на Codepen.
Плъзгач за HTML5 за сравнение на видеоклипове - Когато други разработчици се опитват да направят плъзгач за сравнение, Dudley Storey прилага слайдера към видеото. За да работи, той използва jQuery и само няколко реда код. Вижте демонстрацията на Codepen, за да видите действието.
