Analisis ringkas tentang cara menggunakan perpustakaan turn.js JQuery untuk mencapai kesan pusingan buku

Artikel ini memperkenalkan perpustakaan turn.js jQuery kepada semua orang dan bercakap tentang menggunakan perpustakaan turn.js untuk mencapai kesan menyelak buku. Saya harap ia akan membantu semua orang.

Hari ini saya akan berkongsi dengan anda turn.js JQ terlebih dahulu. [Cadangan tutorial berkaitan: Tutorial jQuery]

Turn.js ialah perpustakaan JavaScript yang menggabungkan semua kelebihan HTML5 dan boleh menjadikan kandungan kami kelihatan seperti buku atau majalah kesan membalikkan.

Ia menggunakan HTML5 dan CSS3 untuk melaksanakan kesan, jadi ia berfungsi dengan baik pada peranti sentuh seperti peranti iOS (iPad, iPhone, iPod) dan peranti Android~
Turn.js mempunyai lebih banyak ciri daripada kandungan Flash yang Ada semua kelebihan kandungan HTML sebenar, kecuali rasa kandungan asli (kandungan pilihan, tiada menu konteks pihak ke-3) dan keupayaan untuk menambah kod iklan, video HTML5, petua alat, imej, peta, borang, menjejaki setiap halaman Dan menggabungkannya dengan beratus-ratus perpustakaan yang kemas untuk web.

***Kata kunci artikel ini: nilai atribut turn.js, penggunaan, kod demo (lihat lampiran, di penghujung artikel~~).

Kesan pelaksanaan adalah seperti berikut

Kod sampel rasmi:

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:

• Langkah pertama: Ingat untuk memperkenalkan fail JQ dahulu (versi 1.3 atau lebih tinggi) Ya~~)

• Langkah 2: Perkenalkan fail turn.js, yang boleh dimuat turun dari laman web rasmi (alamat rasmi: http://www.turnjs.com/ )

• Langkah 3: Seterusnya, anda boleh menggunakan protagonis turn.js kami~~Kodnya adalah seperti berikut ↓↓↓

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

Nota: kelas Sukar boleh difahami sebagai kulit (pertama dan terakhir) buku

• Ciri

✓ Berkenaan dengan iPad dan iPhone.
✓ API yang ringkas, cantik dan berkuasa.
✓ Membenarkan pemuatan dinamik halaman melalui permintaan Ajax.
✓Kandungan HTML5/CSS3 tulen.
✓Dua kesan peralihan.
✓ Berfungsi dalam pelayar lama seperti IE 8 dengan turn.html4.js

• Memerlukan

jQuery 1.3 atau lebih tinggi.
Sokongan Penyemak Imbas
Safari 5 Chrome 16 Firefox 10 IE 10, 9, 8
Peranti
✓ Semua iOS (iPad, iPhone, iPod)
✓ Android (Chrome untuk Android)

• Penambahbaikan

Turn.js 4 mempunyai siri peningkatan prestasi penting pada terasnya.
✓ Kini, kesannya lebih lancar pada platform penyemak imbas.
✓ Komposisi DOM baharu menjamin prestasi yang sama tanpa mengira saiz halaman.

• Pelengkap

turn.html4.js - versi HTML4 turn.js.
zoom.js - Fungsi zum baharu untuk turn.js, lihat contoh.
Scissors.js - belah kepada dua bahagian untuk turn.js.
hash.js - Kawal sejarah navigasi menggunakan pushState dan cincang URI.

• Dokumentasi API

API turn.js dibina dengan mudah sebagai pemalam UI untuk jQuery, yang menyediakan akses kepada satu set fungsi dan membolehkan anda menentukan interaksi pengguna .
Dokumentasi penuh tersedia di sini dan juga dalam format PDF.

Pilihan

• pecutan pecutan

• pemusatan automatik autoCenter

• arah arah

• paparan paparan

• tempoh tempoh

• kecerunan kecerunan

• tinggi ketinggian

• ketinggian

• halaman halaman

• nombor halaman halaman

• turnCorners

• apabila melaksanakan fungsi

• lebar lebar

• zum masuk dan keluar

Sifat

• animasi menganimasikan

• arah arah

• paparan paparan

• orang kurang upaya orang kurang upaya

• halaman halaman

• halaman halaman

• saiz saiz

• pilihan

• lihat paparan

• zum masuk atau keluar

Kaedah kaedah

• tambah Halaman

• pusat

• musnahkan

• arah

• paparkan

• lumpuhkan

• hasPage

• seterusnya

• adalah

• halaman

• halaman

• kupas

• sebelumnya

• julat

• alih keluar Halaman

• ubah saiz

• saiz

• berhenti

• versi

• zum

Acara Acara

• tamat

• dahulu

• terakhir

• hilang

• mula

• berpusing

• bertukar

• zum

kelas kelas Kelas CSS

• .walaupun

• .tetap

• .keras

• .ganjil

• .saiz sendiri

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

Atas ialah kandungan terperinci Analisis ringkas tentang cara menggunakan perpustakaan turn.js JQuery untuk mencapai kesan pusingan buku. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!