Retina Effect With jQuery

demo.html

<div id="main">

	<div id="iphone">
		<div id="webpage">
			<img src="img/webpage.png" width="499" height="283" alt="Web Page" />
			<div id="retina"></div>
		</div>
	</div>

</div>

styles.css

#iphone{
	/* The iphone frame div */
	width:750px;
	height:400px;
	background:url('img/iphone_4G.png') no-repeat center center;
}

#webpage{
	/* Contains the webpage screenshot */
	width:499px;
	height:283px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-141px 0 0 -249px;
}

#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;
}

script.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');
	});
});