Flippage 實際翻頁中畫面

Flippage 可以將網頁的 div 元素內容轉換為可以翻頁的書籍樣式，也可以作用在觸控裝置上讓使用者又真正在看書翻頁的感覺。

使用方法：
第一步 先載入程式所需要的檔案
//使用Google ajax API 直接連結 jQuery 1.8.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
//FlipPage 的主程式碼
<script src="jquery.flippage.min.js"></script>

第二步 只做書籍的內容
<div id="exemples">
    <div><img src="img1.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img1.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img2.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img2.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img3.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img3.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img4.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img4.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img5.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img5.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img6.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img6.jpg" style="margin-left: -250px;" /></div>
</div>

第三步 寫入 JavaScript 的程式碼片段
$(function(){
      $('#exemples').flippage({
          width: 500,
          height: 333,
          delay: 250,
          selectable: false
      });
});

附上程式可修改參數值

參數	預設	說明
width	200	書面寬度
height	150	書面高度
shadowSize	12	陰影大小
delay	250	點擊和翻頁的延遲時間
selectable	false	內容是否可用拖曳方式

作者網站：http://marcbuils.github.com/Flippage/
檔案大小：886 KB
檔案下載：https://github.com/marcbuils/Flippage/zipball/master
檔案備份：下載