jQueryで実現するappleで見た画面の一部をルーペで拡大

あのappleのRetineの画面クオリティが確認できるルーペで拡大する仕掛けについて。

出来た時は本当に感動です。

jQueryのバージョン1.4.2で実現します。

ソース

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>jQueryで実現するappleで見た画面の一部をルーペで拡大</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel='stylesheet' href='../../../css/style.min.css' type='text/css' media='all' />
    <link rel='stylesheet' href='../../../assets/demo/151020/style.css' type='text/css' media='all' />
    <script type='text/javascript' src='../../../js/jquery.min.js'></script>
    <script type='text/javascript' src='../../../assets/demo/151020/script.js'></script>
</head>
<body>
<div>
    <div class="gdlr-page-title-wrapper">
        <div class="gdlr-page-title-container container">
            <h1 class="text-center">:: jQueryで実現するappleで見た画面の一部をルーペで拡大</h1>
            <p></p>
            <p class="text-center">参照：<a href="http://tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/" target="_blank">Apple-like Retina Effect With jQuery</a></p>
        </div>
    </div>
</div>

<div id="main">
    <div id="iphone">
        <div id="webpage">
            <img src="../../../../../uploads/2015/10/151020_photo002.jpg" width="594" height="332" alt="Web Page" />
            <div id="retina"></div>
        </div>
    </div>
    <div id="iphonecover"></div>
</div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>jQueryで実現するappleで見た画面の一部をルーペで拡大</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<div>

<h1 class="text-center">:: jQueryで実現するappleで見た画面の一部をルーペで拡大</h1>

<p></p>

<p class="text-center">参照：<a href="http://tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/" target="_blank">Apple-like Retina Effect With jQuery</a></p>

</div>

</div>

</div>

</body>

</html>

css

    #main {
        position:relative;
        width:1000px;
        height:400px;
    }
    #iphone {
        width:1000px;
        height:400px;
        background:url('../../../../../uploads/2015/10/151020_photo001.png') no-repeat 0 0; position:relative;
    }
    #webpage{
        width:594px; height:332px;    /* 画像サイズ */
        position:absolute;
        top:50%; left:50%;
        margin: -169px 0 0 -299px;
    }
    #retina{
        /* The Retina effect */
        background:url('../../../../../uploads/2015/10/151020_photo003.jpg') no-repeat center center white;
        border:2px solid white;
        /* Positioned absolutely, so we can move it around */
        position:absolute;
        width:180px; height:180px;
        /* Hidden by default */
        display:none;
        /* A blank cursor, notice the default fallback */
        cursor:url('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('blank_google_chrome.cur'),default;
    }
    #main{
        /* The main div */
        margin:40px auto;
        position:relative;
        width:1000px;
    }

#main {

position:relative;

width:1000px;

height:400px;

}

#iphone {

width:1000px;

height:400px;

background:url('../../../../../uploads/2015/10/151020_photo001.png') no-repeat 0 0; position:relative;

}

#webpage{

width:594px; height:332px; /* 画像サイズ */

position:absolute;

top:50%; left:50%;

margin: -169px 0 0 -299px;

}

#retina{

/* The Retina effect */

background:url('../../../../../uploads/2015/10/151020_photo003.jpg') no-repeat center center white;

border:2px solid white;

/* Positioned absolutely, so we can move it around */

position:absolute;

width:180px; height:180px;

/* Hidden by default */

display:none;

/* A blank cursor, notice the default fallback */

cursor:url('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('blank_google_chrome.cur'),default;

}

#main{

/* The main div */

margin:40px auto;

position:relative;

width:1000px;

}

javascript

$(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:594, height:332 } },
		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');
	});
});

$(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:594, height:332 } },

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');

});

解説

iPhoneとニュースの画像をbackgroundで表示。position:absolute;を使って、iPhone画像の上にニュース画像を乗せる感じ
cssの#retineで読み込んでいる画像は拡大用の画像　※実際のサイズの2倍の大きさにする
script.jsのoffsetメソッドを使って、２０行目のwebpage.mousemove(function(e)で現在の座標を取得
script.jsの44行目のretina.cssでHTMLの31行目の<div id=“retina”></div>にleftとtopとbackground-positionのstyleを追加している
script.jsの50行目〜54行目まmではマウスオンしたかどうかでルーペを表示するかしないかを判断している