PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプル

参照:Apple-like Retina Effect With jQuery

▼画像の一部をルーペで見たように拡大表示

Web Page

設置サンプルのソース

<!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 &amp; 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>