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

実行結果

イベント操作：相互作用：hoverの使用例 | jQuery

例：サムネイルにマウスオーバーすると、最前面にレイヤー表示し、クリックするとサイドに原寸大画像をキャプション付きで表示。

参照：Fancy Thumbnail Hover Effect w/ jQuery


by by php_javascript_room, on Flickr

設置サンプルのソース

<!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>イベント操作：相互作用：hoverの使用例 | jQuery</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <!-- JS -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script type="text/javascript">
         $(function(){
            /* 原寸大画像表示 */
            $("ul.thumb li").hover(function() {
               $(this).css({'z-index' :'10'});
               $(this).find('img').addClass("hover").stop()
                  .animate({
                     marginTop:'-110px', 
                     marginLeft:'-110px', 
                     top:'50%', 
                     left:'50%', 
                     width:'174px', 
                     height:'174px',
                     padding:'20px' 
                  }, 200);
               
               } , function() {
               $(this).css({'z-index' :'0'});
               $(this).find('img').removeClass("hover").stop()
                  .animate({
                     marginTop:'0', 
                     marginLeft:'0',
                     top:'0', 
                     left:'0', 
                     width:'100px', 
                     height:'100px', 
                     padding:'5px'
                  }, 400);
            });
            /* クリックしたリンクのhref属性の値をimt要素のsrc属性に設定 */
               $("ul.thumb li a").click(function() {
                  var mainImage = $(this).attr("href"); //Find Image Name
                  $("#main_view img").attr({ src:mainImage });
                  return false;
               });
             
         });
      </script>
      <!-- CSS -->
      <style type="text/css">
         ul.thumb {
            float:left;
            list-style:none;
            margin:0; padding:10px;
            width:360px;
         }
         ul.thumb li {
            margin:0; padding:5px;
            list-style:none;
            float:left;
            position:relative;
            width:110px; height:110px;
         }
         ul.thumb li img {
            width:100px; height:100px;
            border:1px solid #ddd;
            padding:5px;
            background:#f0f0f0;
            position:absolute;
            left:0; top:0;
            -ms-interpolation-mode:bicubic;
         }
         ul.thumb li img.hover {
            background:url("/content/img/ajax/thumb_bg.png") no-repeat center center;
            border:0;
         }
         #main_view {
            float:left;
            margin:0 0 0 -10px; padding:9px 0;
         }
      </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>イベント操作：相互作用：hoverの使用例 | jQuery</h1>
         <h2>例：サムネイルにマウスオーバーすると、最前面にレイヤー表示し、クリックするとサイドに原寸大画像をキャプション付きで表示。</h2>
         <p>参照：<a href='http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/'>Fancy Thumbnail Hover Effect w/ jQuery</a></p>
<!-- CODE -->
<ul class="thumb">
   <li><a href="http://farm4.static.flickr.com/3514/3274514408_1800118ded.jpg"><img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_t.jpg" alt="" /></a></li>
   <li><a href="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381.jpg"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_t.jpg" alt="" /></a></li>
   <li><a href="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5.jpg"><img src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5_t.jpg" alt="" /></a></li>
   <li><a href="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89.jpg"><img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_t.jpg" alt="" /></a></li>
   <li><a href="http://farm4.static.flickr.com/3396/3274514302_10521a0a98.jpg"><img src="http://farm4.static.flickr.com/3396/3274514302_10521a0a98_t.jpg" alt="" /></a></li>
   <li><a href="http://farm4.static.flickr.com/3215/3141100545_e21269fb11.jpg"><img src="http://farm4.static.flickr.com/3215/3141100545_e21269fb11_t.jpg" alt="" /></a></li>
   <li><a href="http://farm4.static.flickr.com/3015/3104684027_a215663229.jpg"><img src="http://farm4.static.flickr.com/3015/3104684027_a215663229_t.jpg" alt="" /></a></li>
   <li><a href="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235.jpg"><img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235_t.jpg" alt="" /></a></li>
   <li><a href="http://farm4.static.flickr.com/3247/3141926720_08ebc48824.jpg"><img src="http://farm4.static.flickr.com/3247/3141926720_08ebc48824_t.jpg" alt="" /></a></li>
</ul>
<div id="main_view">
   <a href="http://www.flickr.com/photos/22559849@N06/" target="_blank"><img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded.jpg" alt="" /></a><br>
   <small style="float: right; color: #999;">by by php_javascript_room, on Flickr</small>
</div>
<br clear="all" />
<!-- / CODE -->
      </div>
   </body>
</html>