Homepage » Coding » Come creare Pure CSS onClick Image Zoom Effect

    Come creare Pure CSS onClick Image Zoom Effect

    CSS non ha uno pseudoclass per targeting degli eventi click, e questo costituisce uno dei più grandi punti dolenti di sviluppatori front-end. La pseudo-classe più vicina è :attivo quale stile un elemento per il periodo di tempo in cui un utente preme il mouse su di esso.

    Questo effetto è tuttavia di breve durata: una volta che l'utente ha rilasciato il mouse, :attivo non funziona più. Dobbiamo trovare un altro modo per emulare l'evento click in CSS.

    Questo post è stato scritto in risposta alla richiesta di un lettore e spiegherà come indirizzare l'evento click con puro CSS in un caso d'uso specifico, zoom dell'immagine.

    Puoi vedere il risultato finale di seguito - una soluzione solo CSS per zoom dell'immagine al clic.

    Quando utilizzare la soluzione solo CSS

    Prima di procedere, voglio dire, che per lo zoom dell'immagine raccomando il metodo solo CSS (che modifica le dimensioni dell'immagine), solo quando si desidera un singolo o a gruppo di poche immagini per avere la funzione di zoom.

    Per un corretto galleria, JavaScript offre più flessibilità ed efficienza.

    Tecniche front-end che useremo

    Ora che sei stato avvertito, esaminiamo rapidamente il 3 tecniche chiave useremo:

    1. Il Tag HTML che consente ai browser di crea aree collegabili su un'immagine. Maggiori informazioni su elemento nel mio post precedente.
    2. Il usemap attributo del etichetta, che collega l'immagine alla mappa immagine.
    3. Il :bersaglio Pseudo-classe CSS che rappresenta un elemento che è stato bersagliato usando il suo selettore ID.
    1. Creare la base HTML

    Per prima cosa, creiamo la base HTML. Nel codice qui sotto, aggiungiamo un'immagine da ingrandire e ingrandire & chiudi le icone dei pulsanti per ingrandire e rimpicciolire.

        

    È importante avere un ID sull'immagine da ingrandire, e il pulsante Chiudi deve essere un collegamento che ha il href = "#" attributo, ti spiegherò perché più avanti nel post.

    2. Aggiungi il CSS

    Inizialmente, l'icona Chiudi non dovrebbe essere visualizzato. Il posizione, margine-, sinistra, e parte inferiore proprietà posto il Espandi e chiudi le icone dove vogliamo che siano - nell'angolo in alto a destra dell'immagine.

    Il pointer-events: none; regola consente agli eventi del mouse di passare attraverso l'icona Espandi e raggiungere l'immagine.

     .img height: 150px; larghezza: 200 px;  .close background-image: url ("Close-icon.png"); background-repeat: no-repeat; fondo: 418 px; display: nessuno; altezza: 32px; a sinistra: 462 px; margin-top: -32px; posizione: relativa; larghezza: 32 px;  .expand bottom: 125px; margin-left: -32px; margin-right: 16px; pointer-events: none; posizione: relativa;  
    Stato iniziale con icone Espandi e nascoste visibili
    3. Aggiungi la mappa immagine

    Sulla mappa immagine, il area cliccabile dovrebbe essere nell'angolo in alto a destra dell'immagine appena sotto l'icona Espandi e le sue dimensioni. Posiziona il elemento prima del primo tag nell'HTML. Legheremo l'immagine alla mappa nel prossimo passaggio.

        

    Nel blocco di codice sopra, il tag definisce il forma, dimensione e URI di un'area linkabile all'interno di una mappa immagine. Per un forma rettangolare, il forma l'attributo prende il rect valore, e il quattro valori del coords l'attributo rappresenta la distanza in pixel tra:

    1. il bordo sinistro dell'immagine e il bordo sinistro dell'area di collegamento
    2. il bordo superiore dell'immagine e il bordo superiore dell'area di collegamento
    3. il bordo sinistro dell'immagine e il bordo destro dell'area di collegamento
    4. il bordo superiore dell'immagine e il bordo inferiore dell'area di collegamento

    Il valore del href l'attributo deve essere il identificatore di hash dell'immagine (questo è il motivo per cui l'immagine dovrebbe avere un id).

    4. Associare l'immagine alla mappa immagine

    Aggiungi il usemap attribuire all'immagine in modo tale da legalo alla mappa immagine. Il suo valore deve essere il rappresentazione hash del nome attributo del etichetta abbiamo aggiunto nel passaggio 3.

      

    L'area cliccabile della mappa immagine ora si trova dietro il pulsante Espandi. Quando l'utente fa clic sul pulsante Espandi, è l'area cliccabile su cui viene fatto clic in realtà: ricorda che abbiamo creato il pulsante Espandi “accettabile” con il pointer-events: none; regola nel passaggio 2.

    In questo modo l'utente bersaglia l'immagine stessa facendo clic su di esso, e dopo il clic l'URI viene contrassegnato con il suffisso "# Img1" identificatore di frammento.

    5. Stile il :bersaglio Pseudo-Class

    Fino al "# Img1" l'identificatore di frammento è alla fine dell'URI, l'immagine targetted può essere in stile con il :bersaglio pseudo-classe

    Aumentano le dimensioni dell'immagine mirata, viene visualizzato il pulsante Chiudi e il pulsante Espandi viene nascosto.

     .img: target height: 450px; larghezza: 500 px;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  
    Immagine ingrandita con pulsante Chiudi visibile
    Come funziona il pulsante Chiudi

    Come il pulsante Chiudi è stato aggiunto come immagine di sfondo (Passo 2), ed è in realtà un tag con il href = # attributo (Passaggio 1), quando viene fatto clic, rimuove l'identificatore di frammento dalla fine dell'URI. Quindi anche rimuove il :bersaglio pseudo-classe dall'immagine e dall'immagine torna alla sua dimensione precedente.

    Ora l'effetto zoom-su-clic del solo CSS è fatto, controlla la demo qui sotto, o leggi un po 'di più sulla teoria che sta dietro le mappe immagine nella prossima sezione.

    Informazioni di base: perché e non ?

    Ormai, sicuramente capisci che la cosa più importante per questa soluzione solo CSS è lavorare indirizzare l'immagine usando il href = "# imgid" attributo, che potrebbe anche essere fatto usando il tag al posto della mappa immagine.

    Questo può essere vero, comunque quando si tratta di immagini, usando il l'elemento è più appropriato. È ancora più importante quando vuoi lo zoom accada cliccando su un'area più grande sull'immagine piuttosto che solo sull'icona Espandi, ti dà una soluzione facile.

      

    Il predefinito valore per forma attributo crea a area rettangolare collegabile che copre l'intera immagine. Se dovessi usare invece, dovresti codificarlo per coprire l'immagine, e potresti anche dover usare un elemento wrapper per lo stesso scopo.

    Per parlare anche degli avvertimenti di questa soluzione, il pointer-events La proprietà CSS (utilizzata nel passaggio 2) è supportata da Internet Explorer solo dalla versione 11.

    Per supportare i browser IE prima di questo, potresti volerli utilizzare invece di , oppure ingrandire l'immagine facendo clic in qualsiasi punto (in questo caso non sarà necessario per l'icona Espandi).