Kuidas luua Pure CSS onClick Image Zoom Effect

CSS-il pole pseudoklaasi sihitud sündmuste sihtimine, ja see on üks suurimad valupunktid eesliidese arendajatele. Lähim pseudo-klass on : aktiivne mis kujundab elemendi selle aja jooksul, mil kasutaja vajutab oma hiirt selle peale.

See efekt on siiski lühiajaline: kui kasutaja vabastab hiire, : aktiivne ei tööta enam. Me peame leidma mõne muu tee emuleerima CSS-i klikkimist.

See postitus on kirjutatud vastuseks lugeja soovile ja see selgitab, kuidas seda teha sihtige klõpsuüritust puhta CSS-iga konkreetse kasutuse puhul, pildi suum.

Allpool on näha lõpptulemus - ainult CSS-i lahendus pildi suum klõpsuga.

Millal kasutada ainult CSS-lahendust

Enne kui jätkata, tahan öelda, et pildi suumimiseks soovitan ainult CSS-meetodit (mis muudab pildi mõõtmeid) ainult siis, kui soovite üksik või a rühm pilte suumi funktsioon.

Le õige galerii, JavaScript pakub rohkem paindlikkust ja tõhusust.

Front-End tehnika, mida me kasutame

Nüüd, kui olete hoiatatud, vaatame kiiresti üle 3 võtmetehnikat me kasutame:

1. The HTML-silt mis lubab brausereid luua lingitavad alad pildi kohal. Loe lähemalt minu varasema postituse element.
2. The usemap atribuut silt, mis ühendab pildi pildikaardile.
3. The : sihtmärk CSS pseudo-klass mis kujutab elementi, mis on suunatud ID-valija abil.

1. Looge HTML-alus

Esiteks loome HTML-aluse. Allpool toodud koodis lisame suurendatav ja laiendatav pilt & sulgege nuppude ikoonid suurendamiseks ja vähendamiseks.

Oluline on, et suurendataval pildil oleks ID, ja nupp Sulge peab olema link, millel on href = "#" atribuut, selgitan, miks hiljem postituses.

2. Lisage CSS

Esialgu on ikoon Sulge ei tohiks kuvada. The positsiooni, marginaal-, vasakule, ja põhja omadused koht the Laiendage ja sulgege ikoonid kus me tahame, et need oleksid - pildi paremas ülanurgas.

The pointer-sündmused: pole; reegel võimaldab hiire sündmusi läbib ikooni Laienda ja pildile.

 .img kõrgus: 150 px; laius: 200 px;  .close background-image: url ("Close-icon.png"); taustaproov: korduv; põhja: 418x; kuva: pole; kõrgus: 32x; vasakule: 462px; margin-top: -32px; positsioon: suhteline; laius: 32x; . expand bottom: 125px; margin-left: -32px; marginaali paremale: 16px; pointer-sündmused: pole; positsioon: suhteline;  

3. Lisage pildikaart

Pildikaardil on klõpsatav ala peaks olema paremas nurgas pildi paremal all ikoonil Laienda ja selle suurusest. Aseta element enne esimest HTML-is. Järgmise sammuga sidume me pildi kaardiga.

Ülaltoodud koodiplokis on silt määratleb ühendatava ala kuju, suurus ja URI pildikaardil. Le ristkülikukujuline, the kuju atribuut võtab otse väärtust ja neli väärtust selle tekib atribuut kujutab pikslitevahelist kaugust:

1. pildi vasak serv ja linki ala vasak serv
2. pildi ülaserv ja linki ala ülemine serv
3. pildi vasak serv ja linki ala parem serv
4. pildi ülaserv ja linki ala alumine serv

Väärtuse href atribuut peab olema kujutise räsiidentifikaator (Sellepärast peaks pilt olema id).

4. Siduge pilt pildikaardiga

Lisa usemap atribuut pildile nii, et siduge see pildikaardiga. Selle väärtus peab olema -. \ t nimi atribuut silt lisasime sammus 3.

Kujutatava kaardi klõpsatav ala nüüd asub laiendamisnupu taga. Kui kasutaja klõpsab nuppu Laienda, on see klõpsatav ala, mis klõpsatakse tegelikkuses - pidage meeles, et tegime nupu Laienda “rahuldav” koos pointer-sündmused: pole; 2. etapis.

Nii kasutaja sihib pildi ise klõpsates seda ja pärast klõpsamist saab URI-ga liidese "# img1" fragmendi tunnus.

5. Stiilige : sihtmärk Pseudo-klass

Kuni "# img1" fragmendi identifikaator on URI lõpus, sihtpilt võib olla stiilis : sihtmärk pseudo-klass

Sihtpildi mõõtmed suurenevad, kuvatakse nupp Sulge ja nupp Laienda.

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

Kuidas sulgev nupp toimib

Kuna nupp Close (Sulge) lisati taustapildina (2. samm) ja see on tegelikult sildiga href = # atribuut (1. etapp), kui see klõpsatakse, eemaldab see fragmendi identifikaatori URI lõpust. Seepärast ka see eemaldab : sihtmärk pseudo-klass pildist ja pildist läheb tagasi oma eelmise suurusega.

Taustinfo: Miks ja mitte ?

Nüüdseks sa mõistad kindlasti, et selle CSS-i ainus lahendus on kõige olulisem sihtige pilti kasutades href = "# imgid" atribuut, mida saab teha ka kujutise kaardi asemel.

The vaikimisi väärtus kuju atribuut loob a ristkülikukujuline ala, mis katab kogu pildi. Kui sa kasutaksid selle asemel peaksite selle pildi katmiseks koodi kodeerima ja võib-olla peate kasutama ka pakendi elementi samal eesmärgil.

Selleks, et toetada IE-i brausereid enne seda, võite kasutada mõlemat selle asemel , või lase pildil suumida, klõpsates seda ükskõik millisel kohal (sel juhul ei ole vaja laienduse ikooni).