Jak vytvořit Pure CSS onClick Image Zoom Effect

CSS nemá pseudoclass pro události kliknutí cílení, a toto je jeden z největší body bolesti vývojářů. Nejbližší pseudo-třída je :aktivní který styluje prvek po dobu, po kterou ho uživatel stiskne.

Tento efekt je však krátkodobý: jakmile uživatel uvolní myš, :aktivní už nefunguje. Musíme najít jinou cestu emulovat událost click v CSS.

Tento příspěvek byl napsán v reakci na žádost čtenáře a vysvětlí, jak na to zacílit událost kliknutí čistým CSS v konkrétním případě použití, zvětšení obrazu.

Konečný výsledek můžete vidět níže - řešení pouze pro CSS zvětšení obrázku po kliknutí.

Kdy použít řešení CSS-Only

Než budu pokračovat, chci říct, že pro zvětšení obrázku doporučuji pouze metodu CSS (která mění rozměry obrázku), pouze pokud chcete singl nebo pár obrázků funkce zoomu.

Pro vlastní JavaScript, JavaScript poskytuje větší flexibilitu a efektivitu.

Techniky front-end, které použijeme

Teď, když jste byli varováni, pojďme se rychle podívat 3 klíčové techniky budeme používat:

1. HTML tag který umožňuje prohlížečům vytvořit propojitelné oblasti nad obrázkem. Přečtěte si více o v mém dřívějším příspěvku.
2. usemap atribut štítek, , který zavěsí obraz do obrazové mapy.
3. :cílová CSS pseudo-třída který představuje prvek, který byl zacílen pomocí voliče ID.

1. Vytvořte HTML Base

Nejdříve vytvořme HTML základnu. V níže uvedeném kódu přidáme obrázek, který má být zvětšen a zvětšen & zavřít ikony tlačítka pro přiblížení a oddálení.

Je důležité mít ID na obrázku, který má být zvětšen, a tlačítko Zavřít musí být odkaz, který má href = "#" atribut, vysvětlím, proč později v příspěvku.

2. Přidejte CSS

Zpočátku klepněte na ikonu Zavřít by se neměly zobrazovat. pozice, okraj-, vlevo, odjet, a dno vlastnosti místo Rozbalte a zavřete ikony kde chceme, aby byly - v pravém horním rohu obrázku.

ukazatele-události: žádné; pravidlo umožňuje událostem myši projít ikonou Rozbalit a dosáhnout obrazu.

 .img výška: 150px; šířka: 200px;  .close background-image: url ("Close-icon.png"); background-repeat: no-repeat; dno: 418px; displej: žádný; výška: 32px; vlevo: 462px; horní okraj: -32px; poloha: relativní; šířka: 32px;  .expand bottom: 125px; levý okraj: -32px; pravý okraj: 16px; ukazatele-události: žádné; poloha: relativní;  

3. Přidejte obrazovou mapu

Na obrazové mapě klikací oblast mělo by v pravém horním rohu obrázku vpravo pod ikonou Rozbalit a jeho velikosti. Umístete prvkem tagu v HTML. V následujícím kroku obrázek připojíme k mapě.

Ve výše uvedeném kódovém bloku tag definuje tvar, velikost a URI spojovatelné oblasti uvnitř obrazové mapy. Pro obdélníkový tvar, tvar atribut vezme rekt hodnotu a čtyři hodnoty z coords atribut představuje vzdálenost v pixelech mezi:

1. levý okraj obrázku a levý okraj oblasti propojení
2. horní okraj obrázku a horní okraj oblasti propojení
3. levý okraj obrázku a pravý okraj oblasti propojení
4. horní okraj obrázku a dolní okraj oblasti propojení

Hodnota href atribut musí být hašovací identifikátor obrázku (proto by měl mít obrázek id).

4. Obraz svázejte s obrázkovou mapou

Přidat usemap atribut obrázku svázat s obrázkovou mapou. Jeho hodnota musí být hašovací reprezentace název atribut štítek přidali jsme v kroku 3.

Oblast obrázku, která je k dispozici, je nyní k dispozici leží za tlačítkem Expand. Když uživatel klikne na tlačítko Rozbalit, je to oblast, na kterou lze kliknout ve skutečnosti - nezapomeňte, že jsme vytvořili tlačítko Rozbalit “průchodný” s ukazatele-události: žádné; pravidlo v kroku 2.

Tímto způsobem uživatel cíl sám na obrázek kliknutím na něj a po kliknutí se URI dostane s příponou "# img1" identifikátor fragmentu.

5. Styl :cílová Pseudo-třída

Až do "# img1" identifikátor fragmentu je na konci URI, cílený obraz může být stylizovaný s :cílová pseudo-třída

Zobrazí se rozměry cíleného zvětšení obrázku, zobrazí se tlačítko Zavřít a tlačítko Rozbalit se skryje.

 .img: target výška: 450px; šířka: 500px;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  

Jak funguje tlačítko Zavřít

Tlačítko Zavřít bylo přidáno jako obrázek na pozadí (krok 2) a je vlastně značka s href = # atribut (krok 1), když na něj klikne, odstraní identifikátor fragmentu od konce URI. Proto také odstraní :cílová pseudo-třída a obrázek se vrátí do své předchozí velikosti.

Informace o pozadí: Proč a ne ?

Teď už určitě chápete, že nejdůležitější věcí pro toto řešení CSS-only je pracovat cílový obrázek pomocí href = "# imgid" atribut, které lze také provést pomocí místo obrazové mapy.

výchozí hodnotu pro tvar atribut vytvoří obdélníková spojovací oblast, která pokrývá celý obraz. Pokud jste měli použít místo toho byste jej museli kódovat tak, aby zakrýval obrázek, a pro stejný účel budete muset použít také prvek obalu.

Chcete-li podporovat prohlížeče IE před tím, můžete použít buď namísto , nebo můžete obrázek zvětšit kliknutím kdekoli na něm (v tomto případě nebude třeba ikonu Rozbalit).