2018年1月8日 星期一

(JS)turn.js翻書效果

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

0 意見:

張貼留言

訂閱： 張貼留言 (Atom)