Cum se creează Efectul Zoom Image Captură CSS onClick
CSS nu are un pseudoclass pentru care vizează evenimentele de clic, și acesta constituie unul dintre cele mai mari puncte de durere de dezvoltatori front-end. Cea mai apropiată pseudo-clasă este :activ
care stiluri un element pentru perioada de timp un utilizator apasa mouse-ul peste el.
Acest efect are totuși o durată scurtă de viață: odată ce utilizatorul eliberează mouse-ul, :activ
nu mai funcționează. Trebuie să găsim altă cale emulați evenimentul clic în CSS.
Acest post a fost scris ca răspuns la solicitarea unui cititor și va explica cum să vizați evenimentul de clic cu CSS pur într-un caz de utilizare specifică, zoom-ul imaginii.
Puteți vedea rezultatul final de mai jos - o soluție numai pentru CSS pentru măriți imaginea pe clic.
Când să utilizați soluția exclusivă CSS
Înainte de a continua, vreau să spun că pentru zoom-ul imaginii recomand metoda CSS-only (care modifică dimensiunile imaginii) numai atunci când doriți o singur sau a grup de câteva imagini pentru a avea caracteristica de zoom.
Pentru o propriu-zis galerie, JavaScript oferă mai multă flexibilitate și eficiență.
Tehnici de fundal pe care le vom folosi
Acum, că ați fost avertizat, să ne uităm rapid la 3 tehnici cheie vom folosi:
-
Etichetă HTML care permite browserelor creați zone legături peste o imagine. Citiți mai multe pe
element în postul meu anterior.
-
usemap
atributuletichetă, care conectează imaginea pe harta imaginii.
-
:ţintă
CSS pseudo-clasă care reprezintă un element care a fost vizat utilizând selectorul său de identificare.
1. Creați baza HTML
Mai întâi, să creăm baza HTML. În codul de mai jos, adăugăm o imagine care trebuie mărită și extinsă & butoane de închidere pentru zoom și ieșire.
Este important să aveți un ID pe imagine care să fie mărit, iar butonul Închidere trebuie să fie un link care are href = "#"
atribut, voi explica de ce mai târziu în post.
2. Adăugați CSS
Inițial, pictograma Închidere nu ar trebui să fie afișate. poziţie
, margine-
, stânga
, și fund
proprietăţi loc Extindeți și închideți pictogramele unde dorim să fie - în colțul din dreapta sus al imaginii.
pointer-events: nici unul;
regulă permite evenimentele mouse-ului treci prin pictograma Expandare și ajungeți la imagine.
.img height: 150px; lățime: 200px; . închide background-image: url ("Close-icon.png"); fundal-repet: nu-repeta; fund: 418px; afișare: niciuna; înălțime: 32px; stânga: 462px; margin-top: -32px; poziția: relativă; lățime: 32px; .expand jos: 125px; margin-stânga: -32px; margin-dreapta: 16px; pointer-events: nici unul; poziția: relativă;
3. Adăugați harta imaginilor
Pe harta imaginii, clickabile ar trebui să fie în colțul din dreapta sus a imaginii chiar sub pictograma Expand și a dimensiunii acesteia. Poziționați element înainte de prima
etichetă în HTML. Vom lega imaginea pe hartă în pasul următor.
În blocul de cod de mai sus, tag definește forma, dimensiunea și URI-ul unei zone care poate fi legată în interiorul unei imagini. Pentru o forma rectangulara,
formă
atributul ia RECT
valoare, și patru valori din coords
atributul reprezintă distanța în pixeli între:
- marginea din stânga a imaginii și marginea din stânga a zonei de legătură
- marginea superioară a imaginii și marginea superioară a zonei de legătură
- marginea din stânga a imaginii și marginea dreaptă a zonei de legătură
- marginea superioară a imaginii și marginea de jos a zonei de legătură
Valoarea lui href
atributul trebuie să fie hash identificator al imaginii (de aceea imaginea ar trebui să aibă un id
).
4. Legați imaginea la harta imaginilor
Adaugă usemap
atribuiți imaginii astfel încât să legați-o la harta imaginii. Valoarea sa trebuie să fie hash reprezentare a Nume
atributul etichetă am adăugat la pasul 3.
Aria de clic a hărții de imagini acum se află în spatele butonului Expand. Când utilizatorul dă clic pe butonul Expand, este zona pe care se face clic pe care se face clic în realitate - rețineți că am făcut butonul Expand “acceptabil” cu pointer-events: nici unul;
în etapa 2.
În acest fel, utilizatorul direcționează imaginea în sine făcând clic pe el și după ce faceți clic pe URI se sugerează cu "# Img1"
identificator de fragmente.
5. Stilul :ţintă
Pseudo-Class
Pană la "# Img1"
identificatorul de fragmente este la sfârșitul URI, imaginea vizată poate fi stil cu :ţintă
pseudo-clasă
Dimensiunile imaginii direcționate cresc, butonul Închidere este afișat, iar butonul Expand este ascuns.
.img: țintă height: 450px; lățime: 500px; .img: țintă + .close display: bloc; .img: țintă + .close + .expand display: none;
Cum functioneaza butonul Close
Pe măsură ce butonul Închidere a fost adăugat ca imagine de fundal (Pasul 2) și este de fapt un eticheta cu
href = #
atribut (Pasul 1), când se dă clic pe el, elimină identificatorul fragmentului de la sfârșitul URI. Prin urmare, de asemenea elimină :ţintă
pseudo-clasă din imagine și din imagine se întoarce la mărimea anterioară.
Acum se efectuează efectul CSS numai cu zoom-on-click, verificați demo-ul de mai jos sau citiți mai mult despre teoria din spatele hărților imaginilor din secțiunea următoare.
Informații de fundal: De ce
si nu
?
Până acum, înțelegeți cu siguranță că cel mai important lucru pentru această soluție numai pentru CSS este de a lucra vizați imaginea utilizând href = "# imgid"
atribut, care ar putea fi, de asemenea, realizat folosind în loc de harta imaginilor.
Acest lucru poate fi adevărat, cu toate acestea, atunci când vine vorba de imagini, folosind este mai adecvat. Este chiar mai important ca atunci când doriți zoom se întâmplă când faceți clic pe o zonă mai mare a imaginii mai degrabă decât doar pe pictograma Expandare,
vă oferă o soluție ușoară.
Mod implicit
valoare pentru formă
atributul creează o dreptunghiular legat zona care acoperă întreaga imagine. Dacă ar trebui să o folosiți în schimb, va trebui să-l codifici pentru a acoperi imaginea și poate fi necesar să utilizați un element de împachetare în același scop.
De asemenea, să vorbești despre avertismentele acestei soluții pointer-evenimente
Proprietatea CSS (folosită la Pasul 2) este acceptată de Internet Explorer numai din versiunea 11.
Pentru a sprijini browserele IE înainte de aceasta, este posibil să doriți să le utilizați in loc de
, sau aveți imaginea marcată făcând clic pe oriunde pe ea (în acest caz nu va fi nevoie de pictograma Expandare).