Para conseguir este efecto necesitamos 3 cosas, 3 archivos distintos. El HTML donde queramos tenerlo, el CSS con los estilos de la lupa y el JS que contiene la funcionalidad. Para todo esto usamos también JQuery, que tenemos varias formas de incluirlo, bajándonos el archivo e incluyéndolo, haciendo referencia al que Google contiene y mantiene actualizado o al propio de JQuery que también mantienen al día.
Como podemos ver en el HTML, en este ejemplo usamos la última opción, usamos directamente el que JQuery mantiene actualizado. Simplemente tenemos 2 DIV y una IMG.
Archivo HTML:
En el CSS tenemos los estilos de la lupa.
Archivo CSS:
#webpage{
/* Contains the webpage screenshot */
width:499px;
height:283px;
position:absolute;
}
#retina{
/* The Retina effect */
background:url('../img/webpage.png') no-repeat center center white;
border:2px solid white;
/* Positioned absolutely, so we can move it around */
position:absolute;
height:180px;
width:180px;
/* Hidden by default */
display:none;
/* A blank cursor, notice the default fallback */
cursor:url('../img/blank.cur'),default;
/* CSS3 Box Shadow */
-moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
-webkit-box-shadow:0 0 5px #777;
box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
/* CSS3 rounded corners */
-moz-border-radius:90px;
-webkit-border-radius:90px;
border-radius:90px;
}
#retina.chrome{
/* A special chrome version of the cursor */
cursor:url('../img/blank_google_chrome.cur'),default;
}
#main{
/* The main div */
margin:40px auto;
position:relative;
width:750px;
}
Y por último tenemos el código JavaScript que detecta los efectos del ratón para situar la lupa en donde corresponde dentro de la imagen a ampliar.
Archivo JS:
$(document).ready(function(){
/* This code is executed on the document ready event */
var left = 0,
top = 0,
sizes = { retina: { width:190, height:190 },
webpage:{ width:500, height:283 } },
webpage = $('#webpage'),
offset = { left: webpage.offset().left, top: webpage.offset().top },
retina = $('#retina');
if(navigator.userAgent.indexOf('Chrome')!=-1)
{
/* Applying a special chrome curosor,
as it fails to render completely blank curosrs. */
retina.addClass('chrome');
}
webpage.mousemove(function(e){
left = (e.pageX-offset.left);
top = (e.pageY-offset.top);
if(retina.is(':not(:animated):hidden')){
/* Fixes a bug where the retina div is not shown */
webpage.trigger('mouseenter');
}
if(left<0 || top<0 || left > sizes.webpage.width ||
top > sizes.webpage.height)
{
/* If we are out of the bondaries of the
webpage screenshot, hide the retina div */
if(!retina.is(':animated')){
webpage.trigger('mouseleave');
}
return false;
}
/* Moving the retina div with the mouse
(and scrolling the background) */
retina.css({
left : left - sizes.retina.width/2,
top : top - sizes.retina.height/2,
backgroundPosition : '-'+(1.6*left)+'px -'+(1.35*top)+'px'
});
}).mouseleave(function(){
retina.stop(true,true).fadeOut('fast');
}).mouseenter(function(){
retina.stop(true,true).fadeIn('fast');
});
});
Podéis descargar este ejemplo con todos los archivos aqui: [wpdm_file id=1]