淺析怎麼使用JQuery的turn.js庫來實現翻書效果
前端（vue）入門到精通課程：進入學習
今天來和大家分享下JQ的turn.js，下面我先來簡單介紹下我們今天的主角turn.js。【相關教學推薦：】
Turn.js是一個JavaScript庫，它集合了HTML5的所有優點，可以使我們的內容看起來像一本書或雜誌，有真實的翻閱的效果。
它使用HTML5和CSS3來執行效果，所以它可以在iOS裝置（iPad，iPhone，iPod）和Android裝置等觸控裝置上很好地工作~
Turn.js具有比Flash內容擁有真實HTML內容的所有優勢，除了感覺到本機內容（可選內容，沒有第三方上下文選單）之外，還可以新增廣告程式碼，HTML5視訊，工具提示，影象，地圖，表單，跟蹤每個頁面並將它們與數百個精巧的庫組合在一起用於網路。
***本文關鍵詞：turn.js屬性值，用法，demo程式碼（見附錄，在文章最後哦~~）。
實現效果如下
官方範例程式碼：
html:
<div id = 「 flipbook」 > <div class = 「 hard」 > Turn.js </ div> <div class = 「 hard」 > </ div> <div> 第1頁 </ div> <div> 第2頁 < / div> <div> 第3頁 </ div> <div> 第4頁 </ div> <div class = 「 hard」 > </ div> <div class = 「 hard」 > </ div> </ div>
js:
第一步：記得要先引入JQ檔案（1.3或更高版本才可以哦~~）
第二步：引入turn.js檔案，可以到官網下載（官方地址：http://www.turnjs.com/）
第三步：接下來就可以用咱們的主角turn.js啦~~程式碼如下↓↓↓
<script type = 「 text / javascript」 >
$（「 #flipbook」）.turn（{ 寬度：400， 高度：300， autoCenter：是 }）;
</ script>注：class為hard的可理解為一本書的（首末）封皮
- 特徵
✓適用於iPad和iPhone。
✓簡單，美觀且功能強大的API。
✓允許通過Ajax請求動態載入頁面。
✓純HTML5 / CSS3內容。
✓兩個過渡效果。
✓可在帶有turn.html4.js的IE 8等舊瀏覽器中使用
- 要求
jQuery 1.3或更高版本。
瀏覽器支援
Safari 5鍍鉻16Firefox 10IE 10、9、8
裝置
✓所有iOS（iPad，iPhone，iPod）
✓安卓（Chrome for Android）
- 改進措施
Turn.js 4在其核心上進行了一系列重要的效能改進。
✓現在，在瀏覽器平臺上效果更加流暢。
✓無論頁面大小如何，新的DOM組成都保證了相同的效能。
- 補體
turn.html4.js-turn.js的HTML4版本。
zoom.js-turn.js的新縮放功能，請參閱範例。
剪刀.js-為turn.js分為兩部分。
hash.js-使用pushState和URI雜湊控制導航歷史記錄。
- API檔案
turn.js API方便地構建為jQuery的UI外掛，它提供對一組功能的存取，並允許您定義使用者互動。
完整的檔案可在此處獲得，也可以PDF格式獲得。
Options
acceleration 加速
autoCenter 自動居中
direction 方向
display 顯示
duration 持續時間
gradients 漸變
height 高度
elevation
page 頁
pages 頁數
turnCorners
when 執行函數
width 寬度
zoom 放大縮小
Properties
animating 動畫
direction 方向
display 顯示
disabled 禁用
page 頁
pages 頁數
size 大小
options
view 檢視
zoom 放大縮小
Methods 方法
addPage
center
destroy
direction
display
disable
hasPage
next
is
page
pages
peel
previous
range
removePage
resize
size
stop
version
zoom
Events 事件
end
first
last
missing
start
turning
turned
zooming
CSS Classes class類
.even
.fixed
.hard
.odd
.own-size
.page
.p[0-9]+
.shadow
.sheet
附錄demo 程式碼
demo && 程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#flipbook div {
text-align: center;
line-height: 500px;
}
.backward,
.forward{
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<!-- 官方範例程式碼 -->
<!-- <div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"> </div>
<div> 第1頁 </div>
<div> 第2頁 </div>
<div> 第3頁 </div>
<div> 第4頁 </div>
<div class="hard"> </div>
<div class="hard"> </div>
</div> -->
<div id="flipbook">
<div style="background: pink;" class="hard"> </div>
<div style="background: olivedrab;" class="hard"> </div>
<div style="background: palegoldenrod;"> Page 1 </div>
<div style="background: paleturquoise;"> Page 2 </div>
<div style="background: plum;"> Page 3 </div>
<div style="background: mediumaquamarine;"> Page 4 </div>
<div style="background: greenyellow;"> Page 5 </div>
<div style="background: darkkhaki;"> Page 6 </div>
<div style="background: aqua;" class="hard"> </div>
<div style="background: teal;" class="hard"> </div>
</div>
<!-- 前一頁 -->
<img src="img/backward.png" class="backward" onclick="backwardPage()">
<!-- 後一頁 -->
<img src="img/forward.png" class="forward" onclick="forwarPage()">
</body>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/turn.min.js"></script>
<script>
$("#flipbook").turn({
width: 600,
height: 500,
// acceleration: true, // 是否加速，對於觸控式螢幕的裝置，這個值必須為true
// autoCenter: true, // 是否居中 預設值false
// direction: "ltr", // 翻書方向，值為rtl / ltr（3種寫法），②HTML: <div id="flipbook" dir="rtl"></div> ③ CSS:#flipbook { direction:rtl; }
display: 'double', // 顯示單頁or雙頁,預設值是double (如果single, class為hard的div首末各一個就可以)
});
function backwardPage() {
$("#flipbook").turn("previous");
}
function forwarPage() {
$("#flipbook").turn("next");
}
</script>
</html>demo如下：
按鈕圖片：
【推薦學習：、】
以上就是淺析怎麼使用JQuery的turn.js庫來實現翻書效果的詳細內容，更多請關注TW511.COM其它相關文章！
