5 Bezmaksas attēlu salīdzināšanas slīdņu skripti

Pārklātie slīdņi ļauj jums veikt salīdzinājumus starp diviem attēliem, parasti pirms tam, kad abi attēli ir pārklāti viens ar otru. Slīdni, ko var manipulēt, lietotājs var vilkt, lai parādītu mazāk attēla un vairāk pēc attēla, un otrādi.

Tas ir ideāls veids dažiem scenārijiem, piemēram, Marsa atmosfēras skarbo seku apskatei vai pilsētas ainavu maiņai pusgadsimta laikā.

Dizaineriem tas ir arī lielisks veids, kā pārdomāt tehnikas vai pieejas izmaiņu apjomu uz sākotnējā attēla. Salīdzinājumam var izmantot dažādas JS bibliotēkas. Šeit ir 5 no tiem.

Twentytwenty

Twentytwenty ir vizuāls līdzeklis, lai būtu viegli atzīmēt atšķirības starp diviem attēliem. Šis rīks, kas izmanto jQuery un jquery.event.move darbam. Tas ir ļoti viegli izmantot, vienkārši sakraut divus attēlus konteinerā, pēc tam zvaniet twentytwenty (); konteineram.

Tad:

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

Twentytwenty ir atsaucīga un darbojas visām ierīcēm, un, ja jūs izmantojat Fonda sistēmu, tas darbosies ārpus kastes.

Sajaukšana

Sajaukšana palīdz jums salīdzināt divus multivides gabalus (fotoattēlus vai GIF) un padarīt to viegli izceltas izmaiņas starp attēliem laika gaitā. Šis spraudnis ir viegli lietojams un darbojas visās ierīcēs. Vienkārši sniedziet divus attēlus, pēc tam izsauciet spraudni ar pieejamajām iespējām.

Iespējas var iestatīt slīdņa sākuma pozīciju, iestatīt to vertikāli vai horizontāli, pievienot etiķeti un kredītu, animāciju un vairāk.

Izmēģiniet tālāk norādīto demonstrāciju:

imgSlider

imgSlider ir vienkāršs jQuery spraudnis, lai padarītu attēlu salīdzināšanas slīdni. Lietošana ir vienkārša un vienkārša: pēc JS un CSS iekļaušanas aplaupiet attēlus divos ar pa kreisi klasē iepriekš attēlu un pa labi klasē pēc tam pēc tam aktivizējiet to, zvanot .slīdni ();. Spraudņa opcijas ietver slīdņa sākotnējās pozīcijas iestatīšanu un norādījumu pievienošanu / rādīšanu uz slīdņa.

Zvaniet spraudnim:

 $ (". slīdni") slīdni (); 

Cocoen

Cocoen ļauj pieskarties lietošanai ar jQuery-Touch notikumu. Tas ir viegli piemērojams, jo HTML struktūra ir līdzīga Twentytwenty iespraust. Skriptu kaudzē, papildus jQuery jums jāiekļauj jQuery Touch notikumu bibliotēka, papildus šim spraudnim.

 
   
 $ (dokuments). jau (funkcija () $ ('. cocoen'). cocoen (););

Izmēģiniet tālāk norādīto demonstrāciju:

Attēlu salīdzināšanas slīdnis

CodyHouse veica attēla salīdzināšanas slīdņa demonstrāciju ar CSS3, jQuery un dažiem skriptiem, lai apstrādātu vilkšanas notikumu un pievienotu mobilo atbalstu. Jūs varat sekot pilnam izskaidrojumam un norādījumiem par šī spraudņa izmantošanu šeit un redzēt demo šeit.

Izmēģiniet tālāk norādīto demonstrāciju:

Šeit ir vēl 3:

Cato - Citiem spraudņiem ir nepieciešama jQuery kā atkarība Cato nav nepieciešama atkarība no darba, padarot to par vieglāku bibliotēku attēlu salīdzināšanas slīdņiem. Lietošana ir vienkārša, vienkārši iekļaujiet Cato CSS un JS bibliotēku un sekojiet tās HTML struktūrai.

Ir pieejamas opcijas, kas var tikt izmantotas jūsu slīdni, ieskaitot rīku padomu pievienošanu, slīdņa virziena maiņu, pat pievienojot filtra efektu, piemēram, sēpiju un pelēktoņu. Tomēr jāatzīmē, ka Cato pašlaik atbalsta tikai WebKit.

Pirms pēc - Tas ir viegls, pilnībā atsaucīgs un darbojas ar jebkuru izkārtojumu un izmēru. Jūs varat redzēt dzīvos demonstrējumus Codepen.

HTML5 video salīdzināšanas slīdnis - Kad citi izstrādātāji mēģina veikt attēlu salīdzināšanas slīdni, tad Dudley Storey izmanto slīdni uz video. Lai veiktu darbu, viņš izmanto jQuery un tikai dažas koda rindas. Skatiet demonstrāciju par Codepen, lai skatītu darbību.