首頁 > 文章 > web前端 > 淺析怎麼使用JQuery的turn.js函式庫來實現翻書效果

淺析怎麼使用JQuery的turn.js函式庫來實現翻書效果

青灯夜游轉載: 2022-09-07 10:56:452234瀏覽

這篇文章跟大家介紹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散列控制導航歷史記錄。

API文件

turn.js API方便地建構為jQuery的UI插件，它提供對一組功能的訪問，並允許您定義使用者互動。
完整的文件可在此處取得，也可以PDF格式取得。

Options

acceleration 加速
##autoCenter 自動置中
#direction 方向
display 顯示
duration 持續時間
gradients 漸層
height 高度
elevation
page 頁
pages 頁數

turnCorners

when 執行函數
Properties
animating 動畫

##view 視圖
zoom 放大縮小
addPage
center
#destroy
direction
##display
disable
#hasPage
next
is
page

#pages

peel
previous
range
#removePage
resize
size
stop
version

Events 事件

##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前端视频】

以上是淺析怎麼使用JQuery的turn.js函式庫來實現翻書效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：cnblogs.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：jQuery發布 3.6.1 新版本，看看有哪些改進！下一篇：jQuery發布 3.6.1 新版本，看看有哪些改進！

看更多