Efecto lupa estilo iPhone con JQuery para tu web

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]