Con jQuery vogliamo creare l'effetto di una cornice dinamica che segue i movimenti del mouse su una galleria di immagini. Per realizzare questo effetto, utilizzeremo un elemento vuoto che fungerà da cursore e creerà la cornice. Tale elemento sarà posizionato in modo contestuale rispetto al contenitore principale delle immagini e avrà un valore di z-index negativo in modo da apparire dietro le immagini stesse. Vediamo i dettagli dell'implementazione.
Partiamo dalla seguente marcatura che già comprende il cursore:
<div id="gallery">
<img src="1.jpg" alt="" />
<img src="2.jpg" alt="" />
<img src="3.jpg" alt="" />
<img src="4.jpg" alt="" />
<div id="cursor"></div>
</div>
A questa marcatura assegniamo i seguenti stili di base:
#gallery {
width: 80%;
margin: 0 auto;
padding: 2em 0;
overflow: auto;
position: relative;
}
#gallery img {
float: left;
width: 200px;
height: 150px;
margin-right: 5px;
cursor: pointer;
padding: 10px;
}
#cursor {
background: #888;
height: 150px;
width: 200px;
position: absolute;
top: 30px;
z-index: -1;
display: none;
padding: 10px;
border-radius: 5px;
}
Con jQuery dobbiamo solo far apparire e scomparire il cursore, spostandolo al contempo utilizzando la proprietà left impostata sull'offset sinistro di ciascuna immagine:
$(function() {
$('img', '#gallery').each(function() {
var $img = $(this);
var left = $img.position().left;
$img.hover(function() {
$('#cursor').stop(true, true).animate({
visibility: 'show',
left: left
}, 'slow');
}, function() {
$('#cursor').stop(true, true).animate({
visibility: 'hide'
}, 'slow');
});
});
});
Potete visionare l'esempio finale in questa pagina.