5 Vaba pildi võrdlemise liugurskriptid

Kattega liugurid võimaldavad teha võrdlusi kahe kujutise vahel, tavaliselt enne seda, kui kaks pilti üksteise peale asetatakse. Liugurit, mida saab manipuleerida, saab kasutaja lohistada, et näidata vähem enne eelmist pilti ja veel pärast pilti ning vastupidi.

See on suurepärane võimalus teatud stsenaariumide jaoks, nagu Marsi atmosfääri karmide tagajärgede vaatamine või kuidas linna maastikud muutuvad poole sajandi jooksul.

Disainerite jaoks on see ka suurepärane võimalus mõelda tehnika või lähenemisviisi muutmise suurusele originaalpildile. Võrdlusteks on mitmeid JS-raamatukogusid. Siin on 5 neist.

Twentytwenty

Twentytwenty on visuaalne vahend, mis muudab kahe pildi vaheliste erinevuste märkimise lihtsaks. See tööriist, mis kasutab jQuery ja jquery.event.move tööle. See on väga lihtne kasutada, lihtsalt virna kaks pilti konteinerisse ja helista twentytwenty (); konteineri jaoks.

Seejärel:

 $ ("# konteiner"). twentytwenty (); 

Twentytwenty on reageeriv ja töötab kõikides seadmetes ning kui kasutate fondi raamistikku, toimib see kasti välja.

Sulge

Sulge aitab teil võrrelda kahte meediumit (fotosid või GIF-faile) ja lihtsustada piltide muutumist aja jooksul. See plugin on lihtne kasutada ja töötab kõikides seadmetes. Lihtsalt esitage kaks pilti, seejärel helistage pluginale olemasolevate valikute abil.

Valikutes võite määrata liuguri alguspunkti, seada selle vertikaalseks või horisontaalseks, lisada sildi ja krediidi, animatsiooni ja palju muud.

Proovige demot allpool:

imgSlider

imgSlider on lihtne jQuery plugin pildi võrdlemise liuguri tegemiseks. Kasutamine on lihtne ja lihtne: pärast JS-i ja CSS-i lisamist mähkige pildid jagamisega vasakule klassi jaoks enne pilt ja õigus klassi jaoks pärast seda seejärel aktiveerige see helistades .liugur ();. Lisandmooduli valikute hulka kuulub liuguri algse asukoha määramine ja liuguril olevate juhiste lisamine / kuvamine.

Helista pluginale:

 $ (". liugur"). liugur (); 

Cocoen

Cocoen võimaldab puudutada jQuery-Touch ürituse kasutamist. See on lihtne rakendada tänu HTML-struktuurile, mis on sarnane Twentytwenty sisse panema. Skriptil on lisaks jQuery'le lisaks sellele pluginale vaja lisada ka jQuery Touchi sündmusraamatukogu.

 
   
 $ (dokument). juba (funktsioon () $ ('. cocoen'). cocoen (););

Proovige demot allpool:

Piltide võrdlemise liugur

CodyHouse tegi demo CSS3, jQuery ja mõne skriptiga pildi võrdluse liugurist, et lohistamist juhtida ja mobiiltoetust lisada. Saate järgida selle plugina täielikku seletust ja juhiseid ning vaadata demot siin.

Proovige demot allpool:

Siin on veel 3:

Cato - Teised pluginad vajavad sõltuvuseks jQueryt, kuid Cato ei vaja sõltuvust töötamisest, muutes selle pildi võrdlemise liugurite jaoks lihtsamaks. Kasutamine on lihtne, lihtsalt Cato CSS ja JS raamatukogu ning järgige selle HTML-i struktuuri.

Liugurile on saadaval valikuvõimalusi, sealhulgas tööriista lisamine, liuguri suuna muutmine, isegi filtri efekti lisamine, näiteks seepia ja halltoonid. Siiski peaksite märkima, et Cato'l on praegu ainult WebKiti toetus.

Enne pärast - See on kerge, täielikult reageeriv ja töötab iga paigutuse ja suurusega. Näete live demosid Codepenil.

HTML5 videovõrdluse liugur - Kui teised arendajad püüavad teha piltide võrdlemiseks liugurit, rakendab Dudley Storei liugurit videole. Töö tegemiseks kasutab ta jQuery ja vaid paari rida koodi. Vaata toimingu tutvustamiseks Codepeni demot.