Kaip sukurti Pure CSS onClick Image Zoom Effect

CSS neturi pseudoklaso nukreipti paspaudimų įvykius, ir tai yra vienas iš didžiausių skausmo taškų kūrėjai. Artimiausia pseudo klasė yra : aktyvus kuris stiliaus elementas tam laikotarpiui, kurį naudotojas nuspaudžia pelę.

Tačiau šis efektas yra trumpalaikis: kai vartotojas atleidžia pelę, : aktyvus daugiau neveikia. Turime rasti kitą būdą imituoti paspaudimo įvykį CSS.

Šis pranešimas buvo parašytas atsakant į skaitytojo prašymą, ir tai paaiškins, kaip nukreipti paspaudimo įvykį su grynu CSS konkrečiu atveju, vaizdo priartinimas.

Galutinį rezultatą galite matyti žemiau - tik CSS sprendimas vaizdo mastelio keitimas spustelėjus.

Kada naudoti tik CSS sprendimą

Prieš tęsdamas, noriu pasakyti, kad vaizdo priartinimui rekomenduoju tik CSS metodą (kuris keičia vaizdo matmenis) tik tada, kai norite vienas arba a keletas nuotraukų priartinimo funkcija.

Dėl tinkamas Galerija, „JavaScript“ suteikia daugiau lankstumo ir efektyvumo.

„Front-End“ metodai, kuriuos naudosime

Dabar, kai esate įspėti, greitai žiūrėkime 3 pagrindiniai metodai mes naudosime:

1. The HTML žyma kuri leidžia naršyklėms sukurti vaizdą sujungiamomis sritimis. Skaitykite daugiau mano ankstesnio pranešimo elementas.
2. The „usemap“ atributas žyma, kad vaizdas prijungiamas prie vaizdo žemėlapio.
3. The : tikslas CSS pseudo klasė kuris yra elementas, kuris buvo nukreiptas naudojant jo ID selektorių.

1. Sukurkite HTML bazę

Pirma, sukurkime HTML bazę. Toliau pateiktame kode pridedame vaizdas turi būti priartintas ir išplėstas & uždaryti mygtuko piktogramas priartinti ir mažinti.

Svarbu, kad vaizde, kurį norite keisti, būtų ID, o mygtukas Uždaryti turi būti nuoroda, kurioje yra href = "#" atributas, paaiškinsiu, kodėl vėliau pranešime.

2. Pridėti CSS

Iš pradžių uždarykite piktogramą neturėtų būti rodomas. The poziciją, marža-, kairėje, ir apačioje savybės vieta Išskleisti ir uždaryti piktogramas kur norime, kad jie būtų - viršutiniame dešiniajame vaizdo kampe.

The rodyklių įvykiai: nėra; taisyklė leidžia pelės įvykius eikite per piktogramą Expand ir pasiekti vaizdą.

 .img aukštis: 150px; plotis: 200px;  .close background-image: url („Close-icon.png“); fono kartojimas: ne kartoti; apačioje: 418px; ekranas: nėra; aukštis: 32px; kairėje: 462px; margin-top: -32px; pozicija: santykinis; plotis: 32px; . expand bottom: 125px; margin-left: -32px; paraštė dešinėje: 16px; rodyklių įvykiai: nėra; pozicija: santykinis;  

3. Pridėti vaizdo žemėlapį

Vaizdo žemėlapyje - paspaudimo sritis turėtų būti viršutiniame dešiniajame kampe vaizdą tiesiai po piktograma Išplėsti ir apie jo dydį. Padėkite elementas prieš pirmąjį žyma HTML. Kitame etape privalome susieti vaizdą su žemėlapiu.

Pirmiau pateiktame kodo bloke žyma apibrėžia formos, dydžio ir URI vaizdo žemėlapio viduje. Dėl stačiakampio formos, figūra atributas užima tiesiai reikšmė, ir keturias vertes iš sutvirtina atributas rodo atstumą pikseliais tarp:

1. kairysis vaizdo kraštas ir kairysis nuorodos srities kraštas
2. viršutinį vaizdo kraštą ir viršutinį nuorodos srities kraštą
3. kairysis vaizdo kraštas ir dešinysis nuorodos srities kraštas
4. viršutinis vaizdo kraštas ir apatinis nuorodos srities kraštas

. \ T href atributas turi būti vaizdą (Štai kodėl vaizdas turi turėti ID).

4. Įdėkite vaizdą į vaizdo žemėlapį

Pridėti „usemap“ atributas atvaizdui susieti jį su vaizdo žemėlapiu. Jo vertė turi būti -. \ t vardas atributas žyma mes pridėjome 3 žingsnyje.

Dabar paspaudžiamas vaizdo žemėlapio plotas atsidaro už „Išskleisti“ mygtuko. Kai vartotojas spustelės mygtuką Išplėsti, tai paspaudžiamas plotas, kuris paspaudžiamas iš tikrųjų - nepamirškite, kad padarėme mygtuką Išskleisti “priimtinas” su rodyklių įvykiai: nėra; 2 žingsnyje.

Tokiu būdu vartotojas nukreipia save į save spustelėję jį, o po to, kai spustelėsite URI, jis bus sufiksuotas "# img1" fragmento identifikatorius.

5. Stilius : tikslas Pseudo klasė

Iki "# img1" fragmento identifikatorius yra URI pabaigoje, tikslinis vaizdas gali būti stiliaus su : tikslas pseudo klasė

Tikslinio vaizdo matmenys padidėja, rodomas mygtukas Uždaryti, o paspaudimo mygtukas paslėptas.

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

Kaip veikia uždaromasis mygtukas

Kadangi mygtukas Uždaryti buvo pridėtas kaip fono paveikslėlis (2 veiksmas), ir iš tikrųjų yra žyma su href = # atributas (1 veiksmas), kai jis paspaudžiamas, jis pašalina fragmento identifikatorių nuo URI pabaigos. Todėl taip pat pašalina : tikslas pseudo klasė atvaizdą ir atvaizdą grįžta į ankstesnį dydį.

Pagrindinė informacija: kodėl ir ne ?

Iki šiol jūs tikrai suprantate, kad svarbiausia, kad šis CSS vienintelis sprendimas būtų nukreipkite vaizdą naudodami href = "# imgid" atributas, kuris taip pat galėtų būti atliekamas naudojant vietoj vaizdo žemėlapio.

The numatytas vertė figūra atributas sukuria a stačiakampio formos jungiamoji sritis, apimanti visą vaizdą. Jei naudojote vietoj to jūs turėtumėte jį užkoduoti, kad būtų padengtas vaizdas, ir jums gali tekti naudoti tą patį tikslą.

Jei norite palaikyti IE naršykles prieš tai, galite naudoti vietoj , arba priartinkite vaizdą, spustelėję bet kur ant jo (šiuo atveju nereikės plėtoti piktogramos).