JQuery的turn.js實現翻書效果

時間 2020-08-19

標籤 jquery turn.js turn 實現翻書效果欄目 JQuery 简体版

原文原文鏈接

前言： javascript

hello你們好~很久沒更博了……今天來和你們分享下JQ的turn.js，下面我先來簡單介紹下咱們今天的主角turn.js。html

Turn.js是一個JavaScript庫，它集合了HTML5的全部優勢，可使咱們的內容看起來像一本書或雜誌，有真實的翻閱的效果。java

它使用HTML5和CSS3來執行效果，因此它能夠在iOS設備（iPad，iPhone，iPod）和Android設備等觸摸設備上很好地工做~
Turn.js具備比Flash內容擁有真實HTML內容的全部優點，除了感受到本機內容（可選內容，沒有第三方上下文菜單）以外，還能夠添加廣告代碼，HTML5視頻，工具提示，圖像，地圖，表單，跟蹤每一個頁面並將它們與數百個精巧的庫組合在一塊兒用於網絡。jquery

***本文關鍵詞：turn.js屬性值，用法，demo代碼（見附錄，在文章最後哦~~）。瀏覽器

實現效果以下（靜態圖）網絡

官方示例代碼：
html:ide

 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 十、九、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>