Hvordan lage ren CSS onClick Image Zoom Effect

CSS har ikke en pseudoklass for å målrette klikkhendelser, og dette utgjør en av de største smertepunktene i utviklere av fremtidsendringer. Den nærmeste pseudoklassen er :active som stiler et element for en tidsperiode en bruker trykker musen over den.

Denne effekten er imidlertid kortvarig: Når brukeren slipper ut musen :active fungerer ikke lenger. Vi må finne en annen måte å etterligne klikkhendelsen i CSS .

Dette innlegget har blitt skrevet som svar på en lesers forespørsel, og den skal forklare hvordan du målretter klikkhendelsen med ren CSS i et bestemt brukstilfelle, bildezoom .

Du kan se det endelige resultatet nedenfor - en CSS-eneste 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 at en enkelt eller en gruppe få bilder skal ha zoomfunksjonen.

For et riktig galleri gir JavaScript mer fleksibilitet og effektivitet.

Front-End Teknikker Vi vil bruke

Nå som du har blitt varslet, la oss raskt se på de 3 hovedteknikkene vi skal bruke:

1. De
2. usemap til tag, som hakker bildet til bilde kartet.
3. Den :target CSS pseudoklassen som representerer et element som har blitt målrettet ved hjelp av ID-velgeren.

1. Opprett HTML-basen

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

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

2. Legg til CSS

I begynnelsen bør ikonet Lukk ikke vises . position, margin-, left og bottom egenskaper plasserer ikonene Utvid og lukk hvor vi vil at de skal være - øverst til høyre i bildet.

pointer-events: none; regelen lar museventyrene passere gjennom ikonet Utvid og nå bildet .

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

På bildet kartet bør det klikkbare området være øverst til høyre på bildet rett under ikonet Utvid, og om størrelsen. Plasser

I kodeblokken over, er tag definerer formen, størrelsen og URIen til et koblingsområde i et bildekart. For en rektangulær form tar coords den coords verdien, og de fire verdiene for coords 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-identifikatoren for bildet (dette er grunnen til at bildet skal ha et id ).

4. Bind bildet til bildekartet

Legg til usemap til bildet for å binde det til bilde kartet . Dens verdi må være hash-representasjon av navnetattributtet til

 Hvordan Lukkeknappen Fungerer 
Som Lukk-knappen ble lagt til som et bakgrunnsbilde (Trinn 2), og er faktisk en tagg med href=# (Trinn 1), når den klikkes, fjerner den fragmentidentifikatoren fra slutten av URI. Derfor fjerner den også :target målpseudoklassen fra bildet, og bildet går tilbake til forrige størrelse .
Nå er CSS-bare zoom-on-click-effekten gjort, sjekk demoen nedenfor, eller les litt mer om teorien bak bildekart i neste avsnitt.
 Bakgrunnsinformasjon: Hvorfor 
Nå forstår du sikkert at det viktigste for denne CSS-only-løsningen på jobb er å målrette bildet ved hjelp av href="#imgid" -attributtet, som også kan gjøres ved å bruke taggen i stedet for bilde kartet.
Dette kan være sant, men når det gjelder bilder, bruker du 
default for formattributtet skaper et rektangulært koblingsområde som dekker hele bildet . Hvis du skulle bruke i stedet, må du kode den for å dekke bildet, og du må kanskje også bruke et innpakningselement for samme formål.
For å også snakke om forbeholdene til denne løsningen støttes pointer-events CSS-egenskapen (vi brukte i trinn 2) bare av Internet Explorer fra versjon 11 .
For å støtte IE-nettlesere før det, vil du kanskje enten bruke i stedet for 







        

          
          

		  
30 Kule og tilpassede Android Hjem-skjermer
            
SEr du lei av å se på den samme gamle Android-hjemmeskjermen? Hvis du eier en Android-enhet, kan du få enhetens hjemmeskjerm til å se imponerende ut med noen få touch av gode apper og widgets. Det er bare så mange typer homescreens der ute, og spørsmålet er om du har tid til å sette opp din egen tilpassede Android-hjemmeskjerm .Vel, kan
			
(Tekniske og design tips)
          
        
      

        

          
          

		  
Slette søkeloggen din fra søkemotorer og sosiale medier
            
Vi bruker mye av vår online tid på å søke etter svar på enkle spørsmål og komplekse spørsmål. Noen ganger gjør vi søk som vi ønsker å holde privat, ting som personlig medisinsk rådgivning, økonomiske henvendelser om investeringer og fremtidige verdipapirer osv. Det er forståelig at enkelte brukere kan føle seg ubehagelige med at søkeloggen holdes online i hendene på en tredjepart.Hva som gjør at ve
			
(Tekniske og design tips)