Flipping Image Gallery 實際執行畫面(最上一張抽離中)

這個套件利用 CSS 的 z-index 屬性和 jQuery 框架實現的一個非常獨特的 Image Gallery，讓使用者有拿著圖片看的感覺，動畫向上抽走一張放到最下層，或者是在最下層抽走一張在移動到最下層，就像實際拿著一疊照片觀看的感覺。

使用方法：
首先載入程式所需要的 JavaScript 程式碼
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/960.css" />
JAX API 取得 jQuery 1.7.2 的 min 版本
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

本範例的CSS樣式表
html { font-size: 16px; min-height: 100%; margin-bottom: 1px; }
body { font-size: 62.5%; font-family: Verdana, Arial, sans-serif; color: #555555; background: #22384d url(../images/bg.jpg) repeat-x; }
a { color: #0F67A1; text-decoration: none; }
a:hover { text-decoration: underline; }
#wrapper { background: white url(../images/sidebar_bg.jpg) repeat-y top right; }
#content h1 { font-size: 2.4em; font-weight: normal; line-height: 32px; margin: 30px 0 50px 0; }
#content p { font-size: 1.4em; line-height: 22px; margin-bottom: 20px; }
#gallery { position: relative; }
#pictures { position: relative; height: 408px; }
#pictures img { position: absolute; top: 0; left: 0; }  
#prev, #next { margin-top: 30px; text-align: center; font-size: 2.0em; }
#footer { text-align: center; margin: 50px 0 20px 0; }
#sidebar ul { margin-top: 20px; }
#sidebar ul li { font-size: 1.2em; padding: 20px 0 20px 0; border-bottom: 1px solid #dddcdc; line-height: 18px; }
#sidebar ul li h2 { font-size: 1.2em; margin-bottom: 8px; }

主要的HTML部分
        <div class="grid_6 prefix_1 suffix_1" id="gallery">
          <div id="pictures">
            <img src="images/picture1.png" alt="" />
            <img src="images/picture2.png" alt="" />
            <img src="images/picture3.png" alt="" />
            <img src="images/picture4.png" alt="" />
            <img src="images/picture5.png" alt="" />
          </div>
       
          <div class="grid_3 alpha" id="prev">
            <a href="#previous">&laquo; Previous Picture</a>
          </div>
          <div class="grid_3 omega" id="next">
            <a href="#next">Next Picture &raquo;</a>
          </div>
        </div>

最後是 JavaScript 的部分
$(document).ready(function() { //perform actions when DOM is ready
  var z = 0; //for setting the initial z-index's
  var inAnimation = false; //flag for testing if we are in a animation

  $('#pictures img').each(function() { //set the initial z-index's
    z++; //at the end we have the highest z-index value stored in the z variable
    $(this).css('z-index', z); //apply increased z-index to <img>
  });

  function swapFirstLast(isFirst) {
    if(inAnimation) return false; //上一段動畫尚未完成
    else inAnimation = true; //可執行
    var processZindex, direction, newZindex, inDeCrease; //上一頁下一頁
    if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; } //下一頁的動作
    else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; } //上一頁的動作
    $('#pictures img').each(function() { //所有圖片
      if($(this).css('z-index') == processZindex) { //圖片的 z-index
        $(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() { //圖片的動畫
          $(this).css('z-index', newZindex) //設定新的圖層值
            .animate({ 'top' : '0' }, 'slow', function() { //動畫的來源
              inAnimation = false; //重設
            });
        });
      } else { //換 z-index
        $(this).animate({ 'top' : '0' }, 'slow', function() { //動畫
          $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease);
        });
      }
    });
    return false; //停止動作
  }
  $('#next a').click(function() {
    return swapFirstLast(true);
  });
  $('#prev a').click(function() {
    return swapFirstLast(false);
  });
});

作者網站：http://tutorialzine.com/2009/09/stylish-navigation-menu-jquery/
檔案大小：2.36 KB
檔案下載：http://demo.tutorialzine.com/2009/09/stylish-navigation-menu-jquery/demo.zip
檔案備份：下載