Slot Machine Tabs 非同步捲動內容的標籤選單

Slot Machine Tabs 不同步捲動內容的標籤選單，以 jQuery 框架開發。當使用者點下不同的標籤時，標籤的內容會以不同的過場動畫時間來捲動，有點像是玩角子老虎機的感覺，讓使用者在看內容的時候也會感到有趣味性。

使用方法：
第一步 載入 Slot Machine Tabs 需要用到的 JavaScript 檔案
<!--使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本-->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>

第二步 寫入標籤選單的 HTML 內容
<div id="slot-machine-tabs">
<ul class="tabs">
<li><a href="#one">Tab One</a></li>
<li><a href="#two">Tab Two</a></li>
<li><a href="#three">Tab Three</a></li>
</ul>
<div class="box-wrapper">
<div id="one" class="content-box">
<div class="col-one col">
<img src="images/evangeline.jpg" alt="" />
</div>
<div class="col-two col">
<h3>Kate</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="col-three col">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<div id="two" class="content-box">
<div class="col-one col">
<img src="images/elizabeth.jpg" alt="" />
</div>
<div class="col-two col">
<h3>Juliet</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="col-three col">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>

<div id="three" class="content-box">
<div class="col-one col">
<img src="images/sonya.jpg" alt="" />
</div>
<div class="col-two col">
<h3>Penelope</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="col-three col">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>

</div> <!-- END Box Wrapper -->

</div> <!-- END Slot Machine Tabs -->

第三步 設計  Slot Machine Tabs 的 CSS 樣式
* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; background: url(../images/bg.png); }
#page-wrap { width: 700px; margin: 50px auto; }
a { text-decoration: none; }
h3 { margin: 0 0 10px 0; }
.tabs { list-style: none; overflow: hidden; padding-left: 1px; }
.tabs li { display: inline; }
.tabs li a { display: block; float: left; padding: 4px 8px; color: black; border: 1px solid #ccc; background: #eee; margin: 0 0 0 -1px; }
.tabs li a.current { background: white; border-bottom: 0; position: relative; top: 2px; z-index: 2; }
.box-wrapper { -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; padding: 20px; background: white; border: 1px solid #ccc; margin: -1px 0 0 0; height: 210px; position: relative; }
.content-box { overflow: hidden; position: absolute; top: 20px; left: 20px; width: 658px; height: 230px; }
.current { z-index: 100; }
.col-one, .col-two, .col-three { width: 30%; float: left; position: relative; top: 350px; }
.col-one, .col-two { margin-right: 3%; }

第四步 寫入 JavaScipt 的程式碼片段
var columnReadyCounter = 0;
function ifReadyThenReset() {
columnReadyCounter++;
if (columnReadyCounter == 3) {
$(".col").not(".current .col").css("top", 350);
columnReadyCounter = 0;
}
};
$(function() {
var $allContentBoxes = $(".content-box"),
   $allTabs = $(".tabs li a"),
   $el, $colOne, $colTwo, $colThree,
   hrefSelector = "",
   speedOne = 1000,
speedTwo = 2000,
speedThree = 1500;
$(".tabs li:first-child a, .content-box:first").addClass("current");
$(".box-wrapper .current .col").css("top", 0);
$("#slot-machine-tabs").delegate(".tabs a", "click", function() {
$el = $(this);
if ( (!$el.hasClass("current")) && ($(":animated").length == 0 ) ) {
$allTabs.removeClass("current");
$el.addClass("current");
// 亂數取得非同步的時間差
speedOne = Math.floor(Math.random()*1000) + 500;
speedTwo = Math.floor(Math.random()*1000) + 500;
speedThree = Math.floor(Math.random()*1000) + 500;
$colOne = $(".box-wrapper .current .col-one");
$colOne.animate({
"top": -$colOne.height()
}, speedOne);

$colTwo = $(".box-wrapper .current .col-two");
$colTwo.animate({
"top": -$colTwo.height()
}, speedTwo);

$colThree = $(".box-wrapper .current .col-three");
$colThree.animate({
"top": -$colThree.height()
}, speedThree);
$allContentBoxes.removeClass("current");
hrefSelector = $el.attr("href");
$(hrefSelector).addClass("current");
$(".box-wrapper .current .col-one").animate({
"top": 0
}, speedOne, function() {
ifReadyThenReset();
});
$(".box-wrapper .current .col-two").animate({
"top": 0
}, speedTwo, function() {
ifReadyThenReset();
});
$(".box-wrapper .current .col-three").animate({
"top": 0
}, speedThree, function() {
ifReadyThenReset();
});
};
});
});

作者網站：http://css-tricks.com/slot-machine-tabs/
檔案大小：67.7 KB(包含範例)
檔案下載：http://css-tricks.com/examples/SlotMachineTabs.zip
檔案備份：下載