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:

1. Etichetă HTML care permite browserelor creați zone legături peste o imagine. Citiți mai multe pe element în postul meu anterior.
2. usemap atributul etichetă, care conectează imaginea pe harta imaginii.
3. :ţ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:

1. marginea din stânga a imaginii și marginea din stânga a zonei de legătură
2. marginea superioară a imaginii și marginea superioară a zonei de legătură
3. marginea din stânga a imaginii și marginea dreaptă a zonei de legătură
4. 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ă.

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.

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.

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).