前言：
hello大家好~好久沒更博了……今天來和大家分享下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:
1 <div id = “ flipbook” > 2 <div class = “ hard” > Turn.js </ div> 3 <div class = “ hard” > </ div> 4 <div> 第1頁 </ div> 5 <div> 第2頁 < / div> 6 <div> 第3頁 </ div> 7 <div> 第4頁 </ div> 8 <div class = “ hard” > </ div> 9 <div class = “ hard” > </ div> 10 </ div>
js:
第一步：記得要先引入JQ文件（1.3或更高版本才可以哦~~）
第二步：引入turn.js文件，可以到官網下載（官方地址：http://www.turnjs.com/）
第三步：接下來就可以用咱們的主角turn.js啦~~代碼如下↓↓↓
1 <script type = “ text / javascript” > 2 $（“ #flipbook”）.turn（{ 寬度：400， 高度：300， autoCenter：是 }）; 3 </ 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 && 代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 #flipbook div { 8 text-align: center; 9 line-height: 500px; 10 } 11 .backward, 12 .forward{ 13 width: 40px; 14 height: 40px; 15 } 16 </style> 17 </head> 18 <body> 19 <!-- 官方示例代碼 --> 20 <!-- <div id="flipbook"> 21 <div class="hard"> Turn.js </div> 22 <div class="hard"> </div> 23 <div> 第1頁 </div> 24 <div> 第2頁 </div> 25 <div> 第3頁 </div> 26 <div> 第4頁 </div> 27 <div class="hard"> </div> 28 <div class="hard"> </div> 29 </div> --> 30 31 <div id="flipbook"> 32 <div style="background: pink;" class="hard"> </div> 33 <div style="background: olivedrab;" class="hard"> </div> 34 <div style="background: palegoldenrod;"> Page 1 </div> 35 <div style="background: paleturquoise;"> Page 2 </div> 36 <div style="background: plum;"> Page 3 </div> 37 <div style="background: mediumaquamarine;"> Page 4 </div> 38 <div style="background: greenyellow;"> Page 5 </div> 39 <div style="background: darkkhaki;"> Page 6 </div> 40 <div style="background: aqua;" class="hard"> </div> 41 <div style="background: teal;" class="hard"> </div> 42 </div> 43 44 <!-- 前一頁 --> 45 <img src="img/backward.png" class="backward" onclick="backwardPage()"> 46 <!-- 后一頁 --> 47 <img src="img/forward.png" class="forward" onclick="forwarPage()"> 48 </body> 49 <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> 50 <script type="text/javascript" src="js/turn.min.js"></script> 51 <script> 52 $("#flipbook").turn({ 53 width: 600, 54 height: 500, 55 // acceleration: true, // 是否加速，對於觸摸屏的設備，這個值必須為true 56 // autoCenter: true, // 是否居中 默認值false 57 // direction: "ltr", // 翻書方向，值為rtl / ltr（3種寫法），②HTML: <div id="flipbook" dir="rtl"></div> ③ CSS:#flipbook { direction:rtl; } 58 display: 'double', // 顯示單頁or雙頁,默認值是double (如果single, class為hard的div首末各一個就可以) 59 }); 60 61 function backwardPage() { 62 $("#flipbook").turn("previous"); 63 } 64 65 function forwarPage() { 66 $("#flipbook").turn("next"); 67 } 68 </script> 69 </html>
demo如下：
按鈕圖片：
..。..。..。..。..。..。..。..。..。END..。..。..。..。..。..。..。..。..。
..。..。..。..。..。..。希望可以幫到你喲..。..。..。..。..。..。
出處： http://www.cnblogs.com/hope666/