Nwlapcug.com


Come creare un effetto lente d'ingrandimento su un sito Web

Come creare un effetto lente d'ingrandimento su un sito Web


Dando ai visitatori alla tua pagina Web la possibilità di dare un'occhiata più da vicino un'immagine richiede un po' di manipolazione delle immagini dietro le quinte. Aggiungendo un po' di CSS, JavaScript e jQuery per il mix è possibile creare l'effetto di una lente di ingrandimento come un puntatore del mouse si muove sopra un'immagine sulla tua pagina. Questo effetto avviene creando una piccola finestra che Visualizza l'immagine di sfondo quando il puntatore del mouse passa sopra l'immagine visualizzata in primo piano.

Istruzioni

1

JavaScript e jQuery sono nella sezione "head" del codice HTML con le istruzioni:

< script type = "text/javascript" src="jquery.js" >< / script >
< script type = "text/javascript" >< / script >

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

2

Inserire un tag CDATA per evitare tentativi del browser di analizzare gli operatori jQuery:

<! [CDATA [

3

Definire l'altezza e larghezza variabili utilizzate per la visualizzazione di entrambe le immagini:

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

4

Impostare le condizioni che attivano la funzione di ingrandimento. Quando chiamato, questa funzione sostituisce il puntatore del mouse con un display circolare di ingrandire l'immagine sottostante quando l'utente sposta il mouse sopra l'immagine più piccola sulla pagina. Creare questo evento con il codice:

Web {

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

});

5

Definire la funzione di ingrandimento schermo e finale i parametri. In questo esempio, viene ingrandita l'immagine nascosta per due volte la dimensione dell'immagine più piccola e la finestra di ingrandimento scomparirà quando il puntatore del mouse si sposta fuori i confini dell'immagine più piccola. È possibile farlo con il codice:

Function myMM(e) () {

var myImage = $("#myimage");
var glassImage = $("#glass-immagine");
vetro di var = $("#glass");
var xs = e.pageX - myImage.offset () tilmato;
var ys = e.pageY - myImage.offset. Top ();
var bx = glassImage.width () / 2 - xsW/w;
var da = glassImage.height () / 2 - ys
H/h;
Glass.CSS("left",e.pageX-75-89+"px").CSS("Top",e.pageY-75-10+"px");
glassImage.css ("background-position", bx + "px" + da + "px");
Se (bx <-W | | da <-H | | bx > 150 | | da > 150) {
myImage.unbind('mousemove',myMM);
glass.fadeOut('fast');
}
}

6

Chiudere la finestra script jQuery e l'esclusione di parser CDATA con le istruzioni:

]] >
< / script >

7

Impostare il layout di pagina CSS per posizionare i limiti di finestra sfondo immagine e ingrandimento più grandi con il codice:

< style type = "text/css" >

monaimage () {

margine sinistro: 200px;
}

vetro () {

background-repeat: no-repeat;
sfondo-posizione: in alto a sinistra;
Larghezza: 250px;
Altezza: 170px;
padding-top: 10px;
padding-left: 89px;
margin: 0;
Posizione: absolute;
display: none;
}

vetro-immagine {

background-image:URL('myImageLarge.jpg');
Larghezza: 150px;
Altezza: 150px;
raggio bordo: 75px;
-moz-border-radius: 75px;
background-repeat: no-repeat;
colore di sfondo: #fff;
margin: 0;
padding: 0;
cursore: nessuno;
}
< / stile >
< / head >

8

Scrivere il codice HTML per visualizzare la pagina nella sezione "body":

< corpo >

Muovi il mouse sopra l'immagine </p > < p >
< img id = "myimage" title = "Ingrandimento esempio" src="myimageSmall.jpg" alt = "The Big Picture" / >
< div id = "vetro" >< div id = "immagine di vetro" >< / div >< / div >

< / body >

< / html >

Consigli & Avvertenze

  • Questo codice si basa su CSS3 per creare un campo di ingrandimento rotonda e potrebbe non funzionare su browser meno recenti. Per garantire la compatibilità con implementazioni precedenti del CSS, definire un campo rettangolare per "#glass-immagine."
  • Senza i tag CDATA, il browser tenta di analizzare il meno rispetto "<" e maggiore ">" operatori come tag HTML. Sempre circondano gli operatori JavaScript e jQuery con i tag CDATA per evitare l'errore di script.