Startpagina » Coding » Hoe maak je Pure CSS onClick Image Zoom Effect

    Hoe maak je Pure CSS onClick Image Zoom Effect

    CSS heeft geen pseudoclass voor richten op klikgebeurtenissen, en dit vormt een van de grootste pijnpunten van front-end ontwikkelaars. De dichtstbijzijnde pseudo-klasse is :actief die een element opmaakt voor de periode dat een gebruiker met de muis eroverheen drukt.

    Dit effect is echter van korte duur: zodra de gebruiker de muis loslaat, :actief werkt niet meer. We moeten een andere manier vinden om emuleer de klikgebeurtenis in CSS.

    Dit bericht is geschreven als antwoord op het verzoek van een lezer en het zal uitleggen hoe target de klikgebeurtenis met pure CSS in een specifieke use-case, afbeelding zoom.

    U kunt het eindresultaat hieronder bekijken - een oplossing met alleen CSS voor afbeelding zoom in klik.

    Wanneer de CSS-only oplossing gebruiken

    Voordat ik verder ga, wil ik wel zeggen dat ik voor het vergroten van de zoom de CSS-only-methode (die de afmetingen van de afbeelding verandert) alleen aanbeveelt als je een single of a groep van enkele afbeeldingen om de zoomfunctie te hebben.

    Voor een gepast galerij, JavaScript biedt meer flexibiliteit en efficiëntie.

    Front-end technieken die we zullen gebruiken

    Nu je bent gewaarschuwd, laten we snel kijken naar de 3 belangrijke technieken we zullen gebruiken:

    1. De HTML-tag waarmee browsers kunnen maak koppelbare gebieden over een afbeelding. Lees meer op de element in mijn eerdere bericht.
    2. De usemap attribuut van de label, die de afbeelding aan de beeldkaart koppelt.
    3. De :doelwit CSS pseudo-klasse dat staat voor een element dat is getarget met zijn ID-selector.
    1. Maak de HTML-basis

    Laten we eerst de HTML-basis maken. In de onderstaande code voegen we toe een afbeelding om in te zoomen en uit te vouwen & knoppictogrammen sluiten om in en uit te zoomen.

        

    Het is belangrijk om een ​​ID op de afbeelding te hebben waarop moet worden ingezoomd en de knop Sluiten moet een koppeling zijn met de href = "#" attribuut, ik zal later in de post uitleggen waarom.

    2. Voeg de CSS toe

    Aanvankelijk het pictogram Sluiten zou niet moeten worden weergegeven. De positie, marge-, links, en bodem eigenschappen plaats de Pictogrammen uitvouwen en sluiten waar we willen dat ze zijn - in de rechterbovenhoek van het beeld.

    De pointer-events: geen; regel staat muisgebeurtenissen toe aan passeer het pictogram Expand en bereik de afbeelding.

     .img height: 150px; breedte: 200 px;  .close background-image: url ("Close-icon.png"); achtergrondherhaling: geen herhaling; onderaan: 418 px; Geen weergeven; hoogte: 32 px; links: 462px; margin-top: -32px; positie: relatief; breedte: 32px;  .expand bottom: 125px; marge links: -32 px; margin-right: 16px; pointer-events: geen; positie: relatief;  
    Initiële status met zichtbare pictogrammen voor Expand en hidden Close
    3. Voeg de Image Map toe

    Op de imagemap, de klikbaar gebied zou moeten zijn in de rechterbovenhoek van de afbeelding direct onder het pictogram Uitvouwen en over de grootte ervan. Plaats de element vóór de eerste tag in de HTML. We binden de afbeelding in de volgende stap aan de kaart.

        

    In het codeblok hierboven, de tag definieert de vorm, grootte en URI van een koppelbaar gebied in een afbeelding. Voor een rechthoekige vorm, de vorm attribuut neemt de rect waarde, en de vier waarden van de coords attribuut geeft de afstand in pixels weer tussen:

    1. de linkerrand van de afbeelding en de linkerrand van het koppelingsgebied
    2. de bovenrand van de afbeelding en de bovenrand van het koppelingsgebied
    3. de linkerrand van de afbeelding en de rechterrand van het koppelingsgebied
    4. de bovenrand van de afbeelding & de onderkant van het koppelingsgebied

    De waarde van de href attribuut moet de hash-ID van de afbeelding (dit is de reden waarom de afbeelding een ID kaart).

    4. Bind de afbeelding aan de Image Map

    Voeg de usemap attribuut aan de afbeelding om bind het aan de afbeelding map. De waarde ervan moet de hash representatie van de naam attribuut van de label we hebben toegevoegd in stap 3.

      

    Het klikbare gebied van de imagemap nu ligt achter de knop Uitvouwen. Wanneer de gebruiker op de knop Uitvouwen klikt, wordt het klikbare gebied in werkelijkheid aangeklikt. Vergeet niet dat we de knop Uitvouwen hebben gemaakt “begaanbaar” met de pointer-events: geen; regel in stap 2.

    Op deze manier de gebruiker richt zich op de afbeelding zelf door erop te klikken, en na de klik krijgt de URI een suffix met de "# Img1" fragment-ID.

    5. Style de :doelwit Pseudo-Klasse

    Tot de "# Img1" fragment-ID staat aan het einde van URI, de doelafbeelding kan zijn gestyled met de :doelwit pseudo-class

    De afmetingen van het doelbeeld nemen toe, de knop Sluiten wordt weergegeven en de knop Uitvouwen wordt verborgen.

     .img: target height: 450px; breedte: 500 px;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  
    Gezoomde afbeelding met de knop Zichtbaar Sluiten
    Hoe de knop Sluiten werkt

    Omdat de knop Sluiten als achtergrondafbeelding is toegevoegd (stap 2) en eigenlijk een tag met de href = # kenmerk (stap 1), wanneer erop wordt geklikt, wordt de fragment-ID verwijderd aan het einde van de URI. Daarom ook verwijdert de :doelwit pseudo-class van de afbeelding en de afbeelding gaat terug naar de vorige grootte.

    Nu is het CSS-only zoom-on-click effect gedaan, bekijk de onderstaande demo, of lees een beetje meer over de theorie achter image maps in de volgende sectie.

    Achtergrondinformatie: waarom en niet ?

    Inmiddels begrijp je zeker dat het belangrijkste voor deze CSS-only oplossing om te werken is om te werken richt de afbeelding met behulp van de href = "# imgid" attribuut, wat ook zou kunnen worden gedaan met behulp van de tag in plaats van de imagemap.

    Dit kan waar zijn, maar als het om afbeeldingen gaat, gebruik dan de element is meer geschikt. Het is zelfs nog belangrijker dat wanneer u de zoomfunctie wilt gebruiken gebeurt door te klikken op een groter gebied op de afbeelding in plaats van alleen op het pictogram Expand, geeft u een eenvoudige oplossing.

      

    De standaard waarde voor vorm attribuut maakt een rechthoekig koppelbaar gebied dat het hele beeld bestrijkt. Als je zou gebruiken in plaats daarvan zou je het moeten coderen om de afbeelding te dekken, en misschien moet je ook een wrapper-element gebruiken voor hetzelfde doel.

    Om ook te spreken over de kanttekeningen van deze oplossing, de pointer-events CSS-eigenschap (die we in stap 2 hebben gebruikt) wordt ondersteund door Internet Explorer alleen vanaf versie 11.

    Om eerder IE-browsers te ondersteunen, wilt u misschien wel gebruiken in plaats van , of laat de afbeelding inzoomen door ergens op te klikken (in dit geval is het pictogram Uitbreiden niet nodig).