あのappleのRetineの画面クオリティが確認できるルーペで拡大する仕掛けについて。
出来た時は本当に感動です。
jQueryのバージョン1.4.2で実現します。
目次
ソース
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!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> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
#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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
$(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メソッドを使って、20行目の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ではマウスオンしたかどうかでルーペを表示するかしないかを判断している
LEAVE A REPLY