溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何使用JQuery的turn.js庫來實(shí)現(xiàn)翻書效果

發(fā)布時(shí)間：2022-09-07 11:02:59 來源：億速云 閱讀：293 作者：iii 欄目：web開發(fā)

這篇文章主要介紹“如何使用JQuery的turn.js庫來實(shí)現(xiàn)翻書效果”，在日常操作中，相信很多人在如何使用JQuery的turn.js庫來實(shí)現(xiàn)翻書效果問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何使用JQuery的turn.js庫來實(shí)現(xiàn)翻書效果”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

實(shí)現(xiàn)效果如下

如何使用JQuery的turn.js庫來實(shí)現(xiàn)翻書效果

官方示例代碼：

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文件，可以到官網(wǎng)下載

  • 第三步：接下來就可以用咱們的主角turn.js啦~~代碼如下↓↓↓

 <script type = “ text / javascript” >
 $（“ #flipbook”）.turn（{ 寬度：400， 高度：300， autoCenter：是 }）;
 </ script>

注：class為hard的可理解為一本書的（首末）封皮

  • 特征

?適用于iPad和iPhone。
?簡(jiǎn)單，美觀且功能強(qiáng)大的API。
?允許通過Ajax請(qǐng)求動(dòng)態(tài)加載頁面。
?純HTML5 / CSS3內(nèi)容。
?兩個(gè)過渡效果。
?可在帶有turn.html4.js的IE 8等舊瀏覽器中使用

  • 要求

jQuery 1.3或更高版本。
瀏覽器支持
Safari 5鍍鉻16Firefox 10IE 10、9、8
設(shè)備
?所有iOS（iPad，iPhone，iPod）
?安卓（Chrome for Android）

  • 改進(jìn)措施

Turn.js 4在其核心上進(jìn)行了一系列重要的性能改進(jìn)。
?現(xiàn)在，在瀏覽器平臺(tái)上效果更加流暢。
?無論頁面大小如何，新的DOM組成都保證了相同的性能。

  • 補(bǔ)體

turn.html4.js-turn.js的HTML4版本。
zoom.js-turn.js的新縮放功能，請(qǐng)參閱示例。
剪刀.js-為turn.js分為兩部分。
hash.js-使用pushState和URI散列控制導(dǎo)航歷史記錄。

  • API文檔

turn.js API方便地構(gòu)建為jQuery的UI插件，它提供對(duì)一組功能的訪問，并允許您定義用戶交互。
完整的文檔可在此處獲得，也可以PDF格式獲得。

Options

  • acceleration 加速

  • autoCenter 自動(dòng)居中

  • direction 方向

  • display 顯示

  • duration 持續(xù)時(shí)間

  • gradients 漸變

  • height 高度

  • elevation

  • page 頁

  • pages 頁數(shù)

  • turnCorners

  • when 執(zhí)行函數(shù)

  • width 寬度

  • zoom 放大縮小

Properties

  • animating 動(dòng)畫

  • direction 方向

  • display 顯示

  • disabled 禁用

  • page 頁

  • pages 頁數(shù)

  • 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, // 是否加速，對(duì)于觸摸屏的設(shè)備，這個(gè)值必須為true
          // autoCenter: true, // 是否居中 默認(rèn)值false
          // direction: "ltr", // 翻書方向，值為rtl / ltr（3種寫法），②HTML: <div id="flipbook" dir="rtl"></div> ③ CSS:#flipbook { direction:rtl; }
          display: 'double', // 顯示單頁or雙頁,默認(rèn)值是double (如果single, class為hard的div首末各一個(gè)就可以)
        });

        function backwardPage() {
            $("#flipbook").turn("previous");
        }

        function forwarPage() {
            $("#flipbook").turn("next");
        }
    </script>
</html>

demo如下：

如何使用JQuery的turn.js庫來實(shí)現(xiàn)翻書效果

按鈕圖片：

如何使用JQuery的turn.js庫來實(shí)現(xiàn)翻書效果 如何使用JQuery的turn.js庫來實(shí)現(xiàn)翻書效果

到此，關(guān)于“如何使用JQuery的turn.js庫來實(shí)現(xiàn)翻書效果”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手