Kā izveidot Pure CSS onClick Image Zoom Effect

CSS nav pseidoklases mērķauditorijas atlases klikšķi, un tas ir viens no lielākie sāpju punkti izstrādātājiem. Tuvākā pseido klase ir : aktīvs kas stils elementu laika periodam, kad lietotājs nospiež viņu peli.

Šis efekts tomēr ir īslaicīgs: kad lietotājs atbrīvo peli, : aktīvs vairs nedarbojas. Mums ir jāatrod cits ceļš emulēt klikšķa notikumu CSS.

Šis ieraksts ir rakstīts, atbildot uz lasītāja lūgumu, un tas izskaidro, kā atlasiet klikšķa notikumu ar tīru CSS konkrētā lietošanas gadījumā, attēla tālummaiņa.

Galīgo rezultātu var redzēt zemāk - tikai CSS risinājums attēla tālummaiņa uz klikšķa.

Kad jāizmanto tikai CSS risinājums

Pirms turpināt, es vēlos teikt, ka attēla tālummaiņai es ieteiktu tikai CSS metodi (kas maina attēla izmērus) tikai tad, ja vēlaties viens vai a dažu attēlu grupa tālummaiņas funkcija.

Priekš pareizi galerija, JavaScript nodrošina lielāku elastību un efektivitāti.

Front-End metodes, ko mēs izmantosim

Tagad, kad esat brīdināts, ātri paskatīsimies 3 galvenās metodes mēs izmantosim:

1. The HTML tag kas ļauj pārlūkiem izveidojiet savienojamus apgabalus virs attēla. Lasiet vairāk par mana agrākā amata elements.
2. The usemap atribūts tag, kas savieno attēlu ar attēla karti.
3. The : Mērķis CSS pseido klase kas ir elements, kas ir mērķēts, izmantojot tā ID selektoru.

1. Izveidojiet HTML bāzi

Pirmkārt, izveidosim HTML bāzi. Tālāk redzamajā kodā pievienojam tālummaiņu un paplašināto attēlu & aizveriet pogas ikonas tālummaiņai.

Ir svarīgi, lai tālummaiņas attēlā būtu ID, un pogai Aizvērt ir jābūt saitei, kurai ir href = "#" atribūts, es paskaidrošu, kāpēc vēlāk postā.

2. Pievienojiet CSS

Sākotnēji aizveriet ikonu Aizvērt nevajadzētu parādīt. The pozīciju, starpību-, pa kreisi, un apakšā īpašības vietu the Izvērst un aizvērt ikonas kur mēs vēlamies, lai tie būtu - attēla augšējā labajā stūrī.

The rādītāju notikumi: nav; noteikums ļauj rīkoties ar pelēm iet caur ikonu Izvērst un sasniegtu attēlu.

 .img augstums: 150px; platums: 200px;  .close fona attēls: url ("Close-icon.png"); fona atkārtošana: nav atkārtota; apakšā: 418px; displejs: nav; augstums: 32px; pa kreisi: 462px; margin-top: -32px; pozīcija: relatīvais; platums: 32px; . expand bottom: 125px; margin-left: -32px; labās malas: 16px; rādītāju notikumi: nav; pozīcija: relatīvais;  

3. Pievienojiet attēla karti

Attēlu kartē, klikšķināms apgabals vajadzētu būt augšējā labajā stūrī attēla tieši zem Izvērst ikonas un par tās lielumu. Novietojiet elementu pirms pirmā tagu HTML. Nākamajā solī mēs saistīsim attēlu ar karti.

Iepriekš minētajā koda blokā tag definē savienojamās zonas formu, lielumu un URI attēla kartē. Priekš taisnstūra forma, the formas atribūts taisnība vērtība, un četras vērtības no savienojumi atribūts pārstāv attālumu pikseļos starp:

1. attēla kreisā mala un saites laukuma kreisā mala
2. attēla augšējā mala un saites apgabala augšējā mala
3. attēla kreisā mala un saites apgabala labā mala
4. attēla augšējo malu un saites apakšējo malu

Vērtība href atribūtam jābūt attēla hash identifikators (tāpēc attēlam ir jābūt ID).

4. Iesiet attēlu attēla kartē

Pievienojiet usemap atribūtu attēlam tā, lai saistiet to ar attēla karti. Tās vērtībai ir jābūt hash reprezentācija nosaukums atribūts tag mēs pievienojām 3. solī.

Attēla kartes noklikšķināmais apgabals tagad atrodas aiz pogas Paplašināt. Kad lietotājs noklikšķina uz pogas Paplašināt, tas ir klikšķināms apgabals, kas tiek noklikšķināts uz realitāti - atcerieties, ka mēs izveidojām pogu Izvērst “pieņemams” Ar rādītāju notikumi: nav; 2. solī.

Tādā veidā lietotājs mērķtiecīgi uz tēlu noklikšķinot uz tā, un pēc tam, kad klikšķis URI saņems papildinājumu ar "# img1" fragmenta identifikators.

5. Stils : Mērķis Pseido klase

Līdz "# img1" fragmenta identifikators ir URI beigās, mērķētais attēls var būt veidots ar : Mērķis pseido klase

Mērķtiecīgā attēla izmēri palielinās, tiek parādīta poga Aizvērt, un izvērst pogas Izvērst.

 .img: target augstums: 450px; platums: 500px;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  

Kā darbojas aizvēršanas poga

Tā kā poga Aizvērt tika pievienota kā fona attēls (2. solis), un faktiski tas ir atzīmējiet ar href = # atribūts (1. solis), kad tas tiek noklikšķināts, tas noņem fragmenta identifikatoru no URI beigām. Tāpēc arī tas noņem : Mērķis pseido klase attºlu un attºlu iet atpakaļ uz iepriekšējo lielumu.

Pamatinformācija: Kāpēc un nē ?

Tagad jūs noteikti saprotat, ka vissvarīgākais, lai šis CSS vienīgais risinājums darbam būtu atlasiet attēlu, izmantojot href = "# imgid" atribūts, ko varētu veikt arī, izmantojot attēla kartes vietā.

The noklusējuma vērtība formas atribūts rada a taisnstūra savienojamā zona, kas aptver visu attēlu. Ja jūs to izmantotu tā vietā jums tas būtu jāraksta, lai segtu attēlu, un jums var būt nepieciešams izmantot iesaiņojuma elementu tam pašam mērķim.

Lai pirms tam atbalstītu IE pārlūkprogrammas, iespējams, vēlēsities to izmantot tā vietā , vai tuviniet attēlu, noklikšķinot jebkurā vietā uz tā (šajā gadījumā nav nepieciešams izvērst ikonu).