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>
Salin selepas log masuk
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>Salin selepas log masuk
Nota: kelas Sukar boleh difahami sebagai kulit (pertama dan terakhir) buku
✓ 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
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)
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.
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.
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
Sifat
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>Salin selepas log masuk
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
