実行結果
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript">
$(function() {
var left = 0,
top = 0,
sizes = { retina: { width:190, height:190 }, /* ルーペサイズ */
webpage:{ width:480, height:320 } }, /* 画像サイズ */
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');
});
});
</script>
<!-- CSS -->
<style type="text/css">
#main {
position:relative;
width:745px; height:389px;
}
#iphone {
width:745px; height:389px;
background:url(/content/img/ajax/iphone.png) no-repeat 0 0;
position:relative;
}
#webpage{
width:480px; height:320px; /* 画像サイズ */
position:absolute;
top:50%; left:50%;
margin:-166px 0 0 -238px;
}
#retina{
/* The Retina effect */
background:url(/content/img/ajax/wally.png) 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(/content/lib/jquery/photoShoot/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(/content/lib/jquery/photoShoot/blank_google_chrome.cur),default;
}
#main{
/* The main div */
margin:40px auto;
position:relative;
width:750px;
}
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照:<a href='http://tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/'>Apple-like Retina Effect With jQuery</a></p>
<p>▼画像の一部をルーペで見たように拡大表示</p>
<!-- CODE -->
<div id="main">
<div id="iphone">
<div id="webpage">
<img src="/content/img/ajax/wally.png" width="480" height="320" alt="Web Page" />
<div id="retina"></div>
</div>
</div>
<div id="iphonecover"></div>
</div><!-- / CODE -->
</div>
</body>
</html>