這篇文章跟大家介紹jQuery的turn.js函式庫，聊聊使用turn.js函式庫實現翻書效果，希望對大家有幫助！
今天來跟大家分享下JQ的turn.js，以下我先簡單介紹下我們今天的主角turn.js。 【相關教學推薦：jQuery教學】
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散列控制導航歷史記錄。
turn.js API方便地建構為jQuery的UI插件，它提供對一組功能的訪問，並允許您定義使用者互動。
完整的文件可在此處取得，也可以PDF格式取得。
Options
acceleration 加速
#direction 方向
turnCorners
animating 動畫
##view 視圖
#pages
Events 事件
.page
.p[0-9]+
.shadow
.sheet
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视频教程、web前端视频】
以上是淺析怎麼使用JQuery的turn.js函式庫來實現翻書效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
