Pure CSS létrehozása onClick Image Zoom effektus

A CSS-nek nincs pszeudoclassja kattintási események célzása, és ez az egyik legnagyobb fájdalom pont a front-end fejlesztők. A legközelebbi pszeudo-osztály :aktív amely egy olyan elemet képez, amelyikre a felhasználó megnyomja az egeret rajta.

Ez a hatás azonban rövid élettartamú: ha a felhasználó elengedi az egeret, :aktív már nem működik. Meg kell találnunk más utat emulálja a CSS-ben a kattintáses eseményt.

Ezt a bejegyzést az olvasó kérésére válaszolták meg, és elmagyarázza, hogyan kell célozza meg a kattintási eseményt tiszta CSS-el egy adott esetben, kép nagyítása.

Az alábbi végeredményt láthatjuk - csak CSS-megoldás a kép nagyítása a kattintással.

Mikor kell használni a CSS csak megoldást

Mielőtt továbblépnék, azt szeretném mondani, hogy a kép nagyításakor csak a CSS-módszert ajánlom (ami megváltoztatja a kép méreteit), csak akkor, ha egy egyetlen vagy a néhány képcsoport a zoom funkciót.

Az a megfelelő galéria, a JavaScript nagyobb rugalmasságot és hatékonyságot biztosít.

Front-End technikák, amelyeket fogunk használni

Most, hogy figyelmeztették, nézzünk át gyorsan 3 kulcsfontosságú technika fogjuk használni:

1. A HTML címke amely lehetővé teszi a böngészők számára hozzon létre összekapcsolható területeket egy kép felett. További információ a elem a korábbi bejegyzésemben.
2. A usemap attribútuma címke, amely a képet a kép térképéhez csatlakoztatja.
3. A :cél CSS pszeudo-osztály amely egy olyan elemet jelöl, amely az ID-szelektor segítségével célzott.

1. Hozza létre a HTML bázist

Először hozzunk létre egy HTML bázist. Az alábbi kódban hozzáadjuk egy nagyítandó és kibontható képet & gombok bezárása nagyításhoz és kicsinyítéshez.

Fontos, hogy a zoomolni kívánt képen azonosító legyen, és a Close (Bezárás) gombnak egy olyan linknek kell lennie, amely rendelkezik a href = "#" attribútum, elmagyarázom, miért később a hozzászólásban.

2. Adja hozzá a CSS-t

Kezdetben a Bezárás ikon nem szabad megjeleníteni. A pozíció, margó-, balra, és alsó tulajdonságok hely a Bontsa ki és zárja be az ikonokat ahol azt akarjuk, hogy legyenek - a kép jobb felső sarkában.

A pointer-események: nincs; szabály lehetővé teszi az egéresemények megjelenítését áthalad a Expand ikonon és elérje a képet.

 .img magasság: 150px; szélesség: 200px;  .close background-image: url ("Close-icon.png"); háttér-ismétlés: nincs ismétlés; alsó rész: 418px; kijelző: nincs; magasság: 32x; balra: 462px; margin-top: -32px; pozíció: relatív; szélesség: 32px; . expand bottom: 125px; margin-left: -32px; margin-right: 16px; pointer-események: nincs; pozíció: relatív;  

3. Adja hozzá a képtérképet

A kép térképen a kattintható terület kellene a jobb felső sarokban A kép kibontása közvetlenül az Expand ikon alatt, és annak méretéről. Helyezze a elem előtt címke a HTML-ben. A következő lépésben a képet a térképhez kötjük.

A fenti kódblokkban a tag határozza meg a egy összekapcsolható terület alakja, mérete és URI egy kép térképen belül. Az a téglalap alakú, a alak az attribútum a len és a négy érték a coords Az attribútum a következő képpontok közötti távolságot mutatja:

1. a kép bal szélét és a linkterület bal szélét
2. a kép felső szélét és a link terület felső szélét
3. a kép bal szélét és a link terület jobb szélét
4. a kép felső széle és a kapcsolat területének alsó széle

A href az attribútumnak az a kép hash azonosítója (ezért van a képnek egy id).

4. Kösse össze a képet a képtérképre

Adja hozzá a usemap attribútum a képhez kösse össze a kép térképével. Értékének az has. ábrázolása név attribútuma címke a 3. lépésben hozzáadtuk.

A kép térképének kattintható területe most a Expand gomb mögött fekszik. Amikor a felhasználó megnyomja a Bővítés gombot, ez a kattintható terület, amelyre a valóságban kattintunk. “járható” a ... val pointer-események: nincs; szabályt a 2. lépésben.

Így a felhasználó célozza a képet rá kattintva, és azután, hogy a kattintás után az URI-t hozzáadták a "# Img1" töredék azonosító.

5. Stílus a :cél Pszeudo-osztály

Amíg a "# Img1" A fragmensazonosító az URI végén van, a célzott kép lehet stílusú :cél pseudo-class

A megcélzott kép méretei nőnek, a Bezárás gomb jelenik meg, és a Bővítés gomb elrejtik.

 .img: target height: 450px; szélesség: 500px;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  

Hogyan működik a Bezárás gomb

Mivel a Bezárás gomb háttérképként lett hozzáadva (2. lépés), és valójában egy címke a href = # attribútum (1. lépés), amikor rákattint, eltávolítja a fragmensazonosítót az URI végén. Ezért is eltávolítja a :cél pseudo-class a képet és a képet visszatér a korábbi méretéhez.

Háttérinformáció: Miért és nem ?

Mostanáig biztosan megérted, hogy a CSS-re csak a legfontosabb megoldás a munka célozza a képet a href = "# imgid" tulajdonság, amit a címke helyett a képtérképet.

A alapértelmezett értéke alak attribútum létrehoz egy téglalap alakú kapcsolható terület, amely lefedi az egész képet. Ha használni szeretnéd ahelyett, hogy a képet lefedné, kódolnia kell, és ugyanazt a célt kell használnia egy csomagoló elemre is.

Ahhoz, hogy az IE böngészőket azelőtt támogassa, érdemes lehet használni ahelyett , vagy a kép nagyítása a bárhová kattintva (ebben az esetben nem lesz szükség a kibontás ikonra).