Come creare un effetto lente di ingrandimento su un sito Web

Contenuto

• indicazioni
• suggerimenti
• avvertimento

Dare ai visitatori del tuo sito web l'opportunità di guardare un'immagine in dettaglio richiede un po 'di manipolazione di queste immagini. Aggiungendo un po 'di CSS, JavaScript e jQuery alla composizione puoi creare l'effetto di una lente d'ingrandimento mentre il puntatore del mouse si sposta su un'immagine sulla tua pagina. Questo effetto si ottiene creando una piccola finestra che visualizza l'immagine di sfondo quando il puntatore del mouse si sposta sull'immagine visualizzata in primo piano.

indicazioni

Offri ai visitatori del tuo sito un "primo piano" dell'immagine (Immagini di marca X / Immagini di marca X / Immagini di Getty)

1. Includere JavaScript e jQuery nella sezione "head" del codice HTML con le istruzioni:

   In questo esempio, la libreria jQuery si trova nella directory HTML predefinita.

2. Inserire un tag CDATA per impedire ai tentativi del browser di analizzare gli operatori jQuery:

3. Imposta le variabili di altezza e larghezza utilizzate per visualizzare le immagini:

   var W = 743; var H = 1155; var w = 192; var h = 300;

4. Impostare le condizioni che iniziano la funzione di ingrandimento. Quando viene chiamata, questa funzione sostituisce il puntatore del mouse con un visualizzatore circolare dell'immagine più grande coperta, quando l'utente passa con il mouse sopra l'immagine più piccola mostrata sulla pagina. Crea questa istanza con il codice:

   
   

   $ (document) .ready (function () {

   $ ("# myimage"). mouseover (function (e) {$ (document) .mousemove (myMM); $ ("# glass"). fadeIn ('veloce');

   });

5. Impostare la funzione di ingrandimento e i parametri di finalizzazione. In questo esempio, l'immagine nascosta viene ingrandita del doppio delle dimensioni dell'immagine più piccola e la finestra di ingrandimento scompare quando il puntatore del mouse si sposta oltre i limiti dell'immagine più piccola. Puoi farlo con il codice:

   function myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# glass-image"); var glass = $ ("# glass"); var xs = e.pageX - myImage.offset (). left; var ys = e.pageY - myImage.offset (). top; var bx = glassImage.width () / 2 - xsW / w; var by = glassImage.height () / 2 - ysH / h; glass.css ("left", e.pageX-75-89 + "px"). css ("top", e.pageY-75-10 + "px"); glassImage.css ("background-position", bx + "px" + di + "px"); if (bx <-W || di <-H || bx> 150 || di> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut ('veloce'); }}

   
   

6. Chiudere lo "script" jQuery ed eliminare il parser CDATA con le istruzioni:

   // ]]>

7. Imposta il layout della pagina con i CSS per posizionare l'immagine di sfondo più grande e la finestra di ingrandimento confina con il codice:

   type = "text / css"> #monaimage {margin-left: 200px; } #glass {background-repeat: no-repeat; posizione di sfondo: in alto a sinistra; larghezza: 250 px; altezza: 170 px; padding-top: 10px; padding-left: 89px; margine: 0; posizione: assoluta; display: nessuno; } # glass-image {background-image: url ('myImageLarge.jpg'); larghezza: 150 px; altezza: 150 px; border-radius: 75px; -moz-border-radius: 75px; background-repeat: no-repeat; background-color: #fff; margine: 0; padding: 0; cursore: nessuno; }

8. Scrivi il codice HTML per visualizzare la pagina nella sezione "body":

   >

   Muovi il mouse sull'immagine

   

suggerimenti

• Questo codice dipende dal CSS3 per creare un campo di ingrandimento rotondo e potrebbe non funzionare nei browser più vecchi. Per compatibilità con le versioni precedenti di CSS, impostare un campo rettangolare per "# glass-image" (lente di ingrandimento).

avvertimento

• Senza i tag CDATA, i browser cercano di analizzare gli operatori meno di "<" e maggiori di ">" come tag HTML. Coinvolgi sempre gli operatori JavaScript e jQuery con i tag CDATA per evitare errori di "script".