Mărirea imaginii pe clic

Mai mult de un an în urmă am scris un articol despre modul în care puteți implementa un zoom făcând clic pe JQuery. De atunci am învățat multe și am învățat multe, și modul în care am început să par să nu optim, nu este frumos, așa că a avut dorința de a scrie script-ul mai modern.

Astfel, esența ideii - script-ul ar trebui să lucreze cu orice imagini cu clasa minimizat pe pagina, nu trebuie să existe nici un produs ascunse (de ce dezordona codul paginii), iar imaginea trebuie să fie afișată în centrul ecranului.

În ultimul exemplu, imaginea la un ascuns

. care a fost centrata pe pagina folosind css. Acum, logica este aceeași, dar punerea în aplicare este destul de diferit:

  1. imagini pe care dorim să crească, ar trebui să fie reduse la minimum clasa;
  2. când faceți clic pe imaginea înainte de închidere vor fi adăugate
    pentru a mări clasa care va fi afișată în imaginea noastră și centrată pe pagină și
    pentru a suprapune clasa. fundal întunecare
  3. atunci când faceți clic pe butonul de închidere sau întuneca fundalul, este necesar să se închidă imaginea mărită, și eliminați elementele adăugate

Să începem. În primul rând afișa o imagine:

/ * Imaginea de pe pagina * /

de frontieră. 1pixel #fff solid;

de frontieră. 1px solid galben;

de frontieră. 1pixel #AFAFAF solid;

fundal. URL-ul (http //codernote.ru/files/cross.png.) fără repetare centru centru;

fundal dimensiuni. 16px 16px;

animație. 4s rota infinit normale;

$ ( '.minimized'). clic (funcție (eveniment)

var i_path = $ (aceasta). attr ( 'src');

$ ( 'Organism'). adăugați ( '

Mărirea imaginii pe clic
„);

la stânga. ($ (Document) lățime () -.. $ ( '#magnify') outerWidth ()) / 2.

top. ($ (Ferestre) înălțime () -.. $ ( '#magnify') outerHeight ()) / 2

$ ( '#overlay, #magnify'). fadeIn ( 'rapid');

Multumesc pentru articol. Doar am decis să fac pe site-ul tau. Odată ce ați uitat aici indică faptul că, în loc de $ (documentul) .height () ar trebui să fie utilizate $ (fereastră) .height (), în caz contrar imaginea se va deplasa în jos la Pampas. Iar pentru #magnify specifica poziția: fix;

articole similare

Pagina anterioară

Pagina următoare