Miten luodaan Pure CSS onClick Image Zoom Effect

CSS: llä ei ole pseudoklassia kohdistustapahtumiin kohdistaminen, ja tämä on yksi suurimmat kivupisteet edistyneiden kehittäjien joukosta. Lähin pseudo-luokka on : aktiivinen joka muotoilee elementin ajanjaksolle, jonka käyttäjä painaa hiirtä sen päälle.

Tämä vaikutus on kuitenkin lyhytikäinen: kun käyttäjä vapauttaa hiiren, : aktiivinen ei enää toimi. Meidän on löydettävä jokin muu tapa jäljitellä CSS: n napsautustapahtumaa.

Tämä viesti on kirjoitettu lukijan pyynnöstä, ja se selittää miten kohdista napsautustapahtuma puhtaalla CSS: llä tietyssä käyttötapauksessa, kuvan zoom.

Voit nähdä alla olevan lopputuloksen - vain CSS-ratkaisun kuvan zoomaus napsautuksella.

Milloin käyttää vain CSS-ratkaisua

Ennen kuin jatkan, haluan sanoa, että kuvan zoomauksen osalta suosittelen vain CSS-menetelmää (joka muuttaa kuvan mittoja) vain silloin, kun haluat yksittäinen tai a ryhmä muutamia kuvia zoomaustoiminto.

A asianmukainen galleria, JavaScript tarjoaa enemmän joustavuutta ja tehokkuutta.

Front-End -tekniikat, joita käytämme

Nyt kun olet varoitettu, katsotaanpa nopeasti 3 avaintekniikkaa käytämme:

1. HTML-tunniste joka sallii selaimet luoda linkitettäviä alueita kuvan päälle. Lue lisää elementti aiemmassa postissa.
2. usemap ominaisuus tag, joka kiinnittää kuvan kuvakarttaan.
3. :kohde CSS pseudo-luokka joka edustaa elementtiä, joka on kohdistettu ID-valitsimella.

1. Luo HTML-pohja

Luo ensin HTML-pohja. Alla olevaan koodiin lisätään suurennettava ja laajennettava kuva & sulje painikkeen kuvakkeet suurennusta varten.

On tärkeää, että kuvassa on tunnus, jota haluat zoomata, ja Sulje-painikkeen on oltava linkki, jossa on href = "#" Määritän, miksi myöhemmin postissa.

2. Lisää CSS

Aluksi Sulje-kuvake ei pitäisi näyttää. asento, marginaali-, vasen, ja pohja ominaisuudet paikka Laajenna ja sulje kuvakkeet missä haluamme niiden olevan - kuvan oikeassa yläkulmassa.

pointer-tapahtumia: ei; sääntö sallii hiiren tapahtumien kulkea Expand-kuvakkeen läpi ja saavuttaa kuvan.

 .img korkeus: 150px; leveys: 200px;  .close background-image: url ("Close-icon.png"); tausta-toisto: ei-toista; pohja: 418px; näyttö: ei; korkeus: 32px; vasen: 462px; margin-top: -32px; asema: suhteellinen; leveys: 32px; . Expand bottom: 125px; margin-left: -32px; marginaali-oikea: 16px; pointer-tapahtumia: ei; asema: suhteellinen;  

3. Lisää kuvakartta

Kuvan kartalla napsautettava alue pitäisi olla oikeassa yläkulmassa kuvan oikeassa reunassa Expand-kuvakkeen alapuolella ja sen koosta. Aseta elementti ennen ensimmäistä tunniste HTML-koodissa. Me sidomme kuvan karttaan seuraavassa vaiheessa.

Yllä olevassa koodilohkossa tag määrittelee muodon, koon ja URI: n kuvakartan sisällä. A suorakulmainen muoto, muoto määrite ottaa rect arvo ja neljä arvoa n & koordinaatit määrite edustaa etäisyyttä pikseleinä seuraavien välillä:

1. kuvan vasen reuna ja linkin alueen vasen reuna
2. kuvan yläreuna ja linkki-alueen yläreuna
3. kuvan vasen reuna ja linkin alueen oikea reuna
4. kuvan yläreuna ja linkki-alueen alareuna

Arvon arvo href attribuutin on oltava kuvan hash-tunniste (Siksi kuvassa pitäisi olla id).

4. Kiinnitä kuva kuvakarttaan

Lisää usemap määritä kuvaan sitoa se kuvakarttaan. Sen arvon on oltava -. \ t nimi ominaisuus tag lisäsimme vaiheessa 3.

Kuvakartan napsautettava alue nyt Laajenna-painikkeen takana. Kun käyttäjä napsauttaa Laajenna-painiketta, se on napsautettava alue, jota napsautetaan todellisuudessa - muista, että teimme Laajenna-painiketta “välttävä” kanssa pointer-tapahtumia: ei; sääntö 2 vaiheessa.

Näin käyttäjä kohdistuu itse kuvaan klikkaamalla sitä, ja sen jälkeen, kun napsautus napsauttaa URI: tä "# Img1" fragmentin tunniste.

5. Tyyliä :kohde Näennäisluokka

Kunnes "# Img1" fragmentin tunniste on URI: n lopussa, kohdennettu kuva voi olla tyylillä :kohde näennäisluokka

Kohdistetun kuvan mitat kasvavat, Sulje-painike näkyy, ja Laajenna-painike piilotetaan.

 .img: target height: 450px; leveys: 500px;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  

Miten Sulje-painike toimii

Kun Sulje-painike lisättiin taustakuvana (vaihe 2), ja se on itse asiassa tunniste href = # määrite (vaihe 1), kun se napsautetaan, se poistaa fragmentin tunnisteen URI: n lopussa. Siksi se myös poistaa :kohde näennäisluokka kuvasta ja kuvasta palaa edelliseen kokoonsa.

Taustatiedot: Miksi ja ei ?

Tähän mennessä olet varmasti ymmärtänyt, että tämän CSS-ratkaisun tärkein ratkaisu on kohdista kuva käyttämällä href = "# imgid" ominaisuus, joka voitaisiin tehdä myös tunniste kuvakartan sijasta.

oletusarvo arvo muoto määrite luo a suorakulmainen liitettävä alue, joka kattaa koko kuvan. Jos käytät sen sijaan sinun pitäisi koodata se peittämään kuva, ja saatat joutua käyttämään kääreelementtiä samaan tarkoitukseen.

Jos haluat tukea IE-selaimia ennen sitä, voit ehkä käyttää niitä sijasta , suurenna kuvaa napsauttamalla sitä missä tahansa (tässä tapauksessa Laajenna-kuvaketta ei tarvita).