Turn.js是一款用於製作翻頁電子書的插件，我認為算是效果及功能都相當不錯的插件，以下介紹Turn.js的基本使用及RWD，本文使用版本為4.1.0
Turn.js官網
1.建置
從官網下載插件後，在<head></head>中加入連結turn.js及jquery的script tag(請注意插件的檔案位置，以下是將其與html檔放在同一資料夾中)
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="turn.min.js"></script>
<body></body> 中放入以下code，若要增減頁數，增減 div tag即可，hard class是其中一種翻頁效果，可自由決定加不加
<div id="flipbook_IDname"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> <div> Page 2 </div> <div> Page 3 </div> <div> Page 4 </div> <div class="hard"></div> </div>
最後再js檔或script tag中加入以下code，就完成啦!
$("#flipbook_IDname").turn({
width: 400,
height: 300,
autoCenter: true
});
長寬藉由改動width及height後的數值來設定
2.翻到特定頁數
$("#flipbook_IDname").turn("page", 10);
//數字就是你要翻到的頁數
3.變為單頁式
$("#flipbook_IDname").turn("display","single");
//single是單頁，double是雙頁也就是預設
4.改變書頁長寬
$("#flipbook_IDname").turn("size", 1000, 750);
//第一個數字為width,第二個數字為height
//注意!!!這裡及建置步驟的width都是指雙頁式時，兩頁的寬
5.RWD
藉由第4項的function，來做出RWD效果，以下的例子電子書寬度會維持視窗寬度的一半，高度則是視窗高度的0.8倍
$(window).resize(function(){
$("#flipbook_IDNAME").turn("size", window.innerWidth*0.5,window.innerHeight*0.8);
})
//window.innerWidth 視窗寬 window.innerHeight視窗高
除了這些以外，Turn.js還是有許多功能的，詳細請參閱官方網站的Documentation
參考資料
Turn.js-Documentation
張貼留言