站長資訊網本篇文章給大家介紹jQuery的turn.js庫，聊聊使用turn.js庫實現翻書效果，希望對大家有所幫助！
前端（vue）入門到精通課程：進入學習
今天來和大家分享下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散列控制導航歷史記錄。
- 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視頻教程、web前端視頻】
