Slik oppretter du ren CSS onClick Image Zoom Effect

CSS har ikke en pseudoklasse for målrettede klikkhendelser, og dette utgjør en av største smerte poeng av front-end utviklere. Den nærmeste pseudoklassen er :aktiv som stiler et element for tiden en bruker trykker musen over den.

Denne effekten er imidlertid kortvarig: når brukeren slipper musen, :aktiv virker ikke lenger. Vi må finne en annen vei til etterligne klikkhendelsen i CSS.

Dette innlegget har blitt skrevet som svar på en lesers forespørsel, og det kommer til å forklare hvordan mål klikk hendelsen med rent CSS i en bestemt brukstilstand, bildezoom.

Du kan se det endelige resultatet nedenfor - en CSS-only løsning for bildezoom på klikk.

Når skal du bruke CSS-Only Solution

Før jeg går videre, vil jeg si at for bildezoom anbefaler jeg CSS-only-metoden (som endrer dimensjonene til bildet), bare når du vil ha en enkelt eller a gruppe få bilder å ha zoom-funksjonen.

For en ordentlig galleri, gir JavaScript mer fleksibilitet og effektivitet.

Front-End Teknikker Vi vil bruke

Nå som du har blitt varslet, la oss raskt se over 3 viktige teknikker vi skal bruke:

1. De HTML-taggen som tillater nettlesere å opprett linkbare områder over et bilde. Les mer på element i mitt tidligere innlegg.
2. De usemap attributt av stikkord, som hakker bildet til bildet kartet.
3. De :mål CSS pseudoklasse som representerer et element som har blitt målrettet ved hjelp av ID-väljeren.

1. Opprett HTML-basen

La oss først lage HTML-basen. I koden nedenfor legger vi til et bilde som skal zoomes og utvides & lukk knapp ikoner for å zoome inn og ut.

Det er viktig å ha en ID på bildet som skal zoome, og lukkeknappen må være en lenke som har href = "#" attributt, jeg skal forklare hvorfor senere i innlegget.

2. Legg til CSS

I utgangspunktet er ikonet Lukk bør ikke vises. De stilling, margin-, venstre, og bunn eiendommer sted de Utvid og lukk ikoner hvor vi vil at de skal være - øverst til høyre på bildet.

De peker-hendelser: ingen; regelen tillater mus hendelser til gå gjennom ikonet Utvid og nå bildet.

 .img høyde: 150px; bredde: 200px;  .close background-image: url ("Close-icon.png"); Bakgrunn-gjenta: nei-gjenta; bunn: 418px; skjerm: ingen; høyde: 32px; igjen: 462px; margin-topp: -32px; posisjon: relativ; bredde: 32px;  .expand bunn: 125px; margin-venstre: -32px; margin-høyre: 16px; peker-hendelser: ingen; posisjon: relativ;  

3. Legg til bildekartet

På bildet kartet, på klikkbart område bør være i øverste høyre hjørne av bildet rett under ikonet Utvid, og om størrelsen. Plasser element før den første tag i HTML-koden. Vi binder bildet til kartet i neste trinn.

I kodeblokken over, er tag definerer form, størrelse og URI av et koblingsbart område inne i et bilde kart. For en rektangulær form, de form attributtet tar rect verdi, og fire verdier av coords Attributt representerer avstanden i piksler mellom:

1. venstre kant av bildet og venstre kant av lenkeområdet
2. øverste kant av bildet og øverste kant av lenkeområdet
3. venstre kant av bildet og høyre kant av lenkeområdet
4. toppkanten av bildet og den nederste kanten av lenkeområdet

Verdien av href Attributtet må være hash-identifikator for bildet (dette er grunnen til at bildet skal ha en id).

4. Bind bildet til bildekartet

Legg til usemap attributt til bildet slik at bind den til bilde kartet. Dens verdi må være hash representasjon av Navn attributt av stikkord vi la til i trinn 3.

Det klikkbare området på bildet kartet nå ligger bak Utvid-knappen. Når brukeren klikker på Utvid-knappen, er det det klikkbare området som er klikket i virkeligheten - husk at vi gjorde Utvid-knappen “farbar” med peker-hendelser: ingen; regelen i trinn 2.

På denne måten brukeren mål selve bildet ved å klikke på det, og etter klikket blir URI suffixet med "# Img1" fragmentidentifikator.

5. stil på :mål Pseudo-Class

Til "# Img1" fragmentidentifikator er på slutten av URI, det målrettede bildet kan være stylet med :mål pseudo-klasse

Dimensjonene til den målrettede bildet øker, knappen Lukk vises, og knappen Utvid blir skjult.

 .img: mål høyde: 450px; bredde: 500px;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  

Hvordan Lukkeknappen Fungerer

Som Lukk-knappen ble lagt til som et bakgrunnsbilde (Trinn 2), og er faktisk en tag med href = # attributt (trinn 1), når det klikkes, fjerner det fragmentidentifikatoren fra slutten av URI. Derfor er det også fjerner :mål pseudo-klasse fra bildet og bildet går tilbake til sin forrige størrelse.

Bakgrunnsinformasjon: Hvorfor og ikke ?

Ved nå forstår du sikkert at det viktigste for denne CSS-only-løsningen på jobb er å målrett bildet ved hjelp av href = "# imgid" Egenskap, som også kan gjøres ved hjelp av tag i stedet for bilde kartet.

De misligholde verdi for form attributt skaper en rektangulært koblingsbart område som dekker hele bildet. Hvis du skulle bruke I stedet må du kodes det for å dekke bildet, og du må kanskje også bruke et innpakningselement for samme formål.

For å støtte IE-nettlesere før det, kan det være lurt å bruke i stedet for , eller få bildet til å zoome inn ved å klikke hvor som helst på det (i dette tilfellet er det ikke behov for utvid ikonet).