Cum se face o comparație interactivă a două fotografii pe jquery

Cum se face o comparație interactivă a două fotografii pe jquery

Buna ziua tuturor! Astăzi vă voi arăta cum să facă o comparație interactivă a unui plugin simplu JQuery - TwentyTwenty.

Găsiți aici descrieri și exemple. Acolo puteți descărca acest plug-in făcând clic pe butonul corespunzător.

Acum hai să vorbim despre cum să începem totul. Mai întâi, descărcați biblioteca JQuery și JQuery Event Movie. pentru a sprijini dispozitivele mobile.

Acum creați un container cu două fotografii




Când imaginile sunt descărcate, sunăm pluginul, trecând numele containerului.

Sau puteți adăuga clasa de care aveți nevoie la container




Acest plugin are un parametru - marginea din stânga.

După cum puteți vedea mai sus, în mod implicit, marginea din marginea din stânga este egală cu jumătate, adică. cursorul va fi în mijloc. Dar puteți, bineînțeles, să schimbați această valoare la ceea ce aveți nevoie.

Deci, astăzi ne-am uitat la un plugin simplu pentru biblioteca JQuery - TwentyTwenty. care vă permite să faceți rapid un efect de calitate "înainte și după".

Vă mulțumesc pentru atenție și noroc!

Recomanda acest articol prietenilor tai:

Dacă ți-a plăcut site-ul, atunci trimiți un link spre el (pe site-ul tău, pe forum, în contact):

Se pare ca aceasta:

  • Codul BB al legăturilor pentru forumuri (de exemplu, îl puteți pune în semnătură):
  • <





    ?php include ($ _SERVER ["DOCUMENT_ROOT"]. "/ vstavki / blokvtext2.php"); ?>





    Articole similare

    Trimiteți-le prietenilor: