QuickFlip2 網頁元素翻頁效果

QuickFlip2 是一個可以讓任何的 HTML 元素標籤產生類似卡片翻轉效果的一個 jQuery 框架套件，看起來的效果就像是在 Apple iPhone 上的 UI 動畫一樣。可讓一些不太重要的資訊顯示於背面，當使用者有需要的時候才去點擊翻到背面去查看內容，也同時省下了很多的網頁空間可以拿來放置更多對網站有用的資訊。

使用方法：
第一步 載入 QuickFlip2 需要用到的 JavaScript 檔案
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- QuickFlip2 的主程式碼 -->
<script src="js/jquery.quickflip.min.js" type="text/javascript"></script>

第二步 設計翻頁的 HTML 區塊
<div class="quickFlip">
        <div class="blackPanel">
            <h3 class="first quickFlipCta">jQuery QuickFlip</h3>
            <p class="panel-content"> QuickFlip takes any piece of HTML markup and flips it like a card. It's simple to implement and the animation is fresh and original. </p>
            <p>
            <a href="#" class="quickFlipCta">Click to Flip</a>
            </p
        </div>
        <div class="redPanel">
            <h3 class="first quickFlipCta">QuickFlip 2</h3>
            <h4>A plugin for jQuery</h4>
            <p><em>By Jon Raasch</em></p>
            <p><a href="http://jonraasch.com/blog/quickflip-2-jquery-plugin">More About QuickFlip</a>
            </p>
            <p><a href="#" class="quickFlipCta">Click to see QuickFlip in action</a>
        </div>
    </div>

第三步 設計區塊的 CSS 樣式
body {
    min-width: 600px;
}

.quickFlip, .quickFlip3 {
    height: 216px;
    width: 322px;
}

.quickFlip2 {
    height: 150px;
    width: 40%;
    float: left;
    margin-right: 9%;
}

/* the rest of this is irrelevent */

H1, H2 {
    float: left;
    padding-right: 15px;
    line-height: 32px;
}

.clear {
    clear: both;
    magin: 0;
    padding: 0;
}

.redPanel, .blackPanel {
    text-align: center;
}

.half-col {
    width: 50%;
    float: left;
}

/**** panels ****/

.quickFlip, .quickFlip2, .quickFlip3 {
    font-family: "Trebuchet MS", Verdana, Sans-serif, sans;
    font-size: 13px;
    position: relative;
}

.quickFlip .blackPanel, .quickFlip3 .blackPanel {
    background: url('../img/flip-panel-brown.png') no-repeat 0 0 #FFF;
    position: absolute;
}

.quickFlip .redPanel, .quickFlip3 .redPanel {
    background: url('../img/flip-panel.png') no-repeat 0 0 #FFF;
    position: absolute;
}

.quickFlip2 .blackPanel {
    background-color: #FFD993;
    color: darkbrown;
    border: 1px outset #A61C14;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

.quickFlip2 .redPanel {
    background-color: #75941f;
    color: #FFF;
    border: 1px outset #4f6417;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

.half-col p {
    padding: 5px;
    margin:0 30px 10px 30px;
}
.half-col p.panel-content {
    text-align: left;
    margin-top: 10px;
}
.half-col h3, .half-col h4 {
    padding: 0;
    margin: 0 35px;
}
.half-col h3 {
    text-align: left;
    font-size:24px;
    line-height:24px;
}
.half-col .redPanel h3 {
    text-align: center;
    margin-bottom: 10px;
}
.half-col .first {
    margin-top: 30px;
}
.half-col EM {
    display: block;
    padding: 0;
}
.half-col A.quickFlipCta {
    position: absolute;
    bottom: 30px;
    left: 65px;
    width: 210px;
    font-size: 15px;
    outline: none;
}
.quickFlip2 .redPanel a {
    color: #FFF;
}
.quickFlipCta {
    cursor: pointer;
}

第四步 寫入 JavaScript 讓 QuickFlip2 初始化
$(function() {
    $('.quickFlip').quickFlip();
});

附上 QuickFlip2 可修改的參數表

參數	型態	說明
closeSpeed	整數	翻轉過來的毫秒數
openSpeed	整數	翻轉回另一面的毫秒數
vertical	布林	垂直或為水平翻轉
easing	字串	動畫樣式
ctaSelector	字串	觸發元件
refresh	布林	是否每次翻轉重新建立動畫
panelWidth	字串	面板的寬度
panelHeight	字串	面板的高度
noResize	布林	是否自動調整大小

作者網站：http://jonraasch.com/blog/quickflip-2-jquery-plugin
檔案大小：39.7 KB (包含範例)
檔案下載：http://dev.jonraasch.com/quickflip/download
備份下載：下載