Dieser Artikel stellt Ihnen die turn.js-Bibliothek von jQuery vor und spricht über die Verwendung der turn.js-Bibliothek, um den Book-Turn-Effekt zu erzielen.
Heute werde ich JQs turn.js mit Ihnen teilen. Lassen Sie mich heute zunächst kurz unseren Protagonisten turn.js vorstellen. [Verwandte Tutorial-Empfehlungen: jQuery-Tutorial]
Turn.js ist eine JavaScript-Bibliothek, die alle Vorteile von HTML5 vereint und unsere Inhalte wie ein Buch oder eine Zeitschrift aussehen lässt, mit einem echten Umblättereffekt.
Es verwendet HTML5 und CSS3, um Effekte auszuführen, sodass es gut auf Touch-Geräten wie iOS-Geräten (iPad, iPhone, iPod) und Android-Geräten funktioniert.~
Turn.js bietet alle Vorteile von echten HTML-Inhalten im Vergleich zu Flash-Inhalten Sie fühlen sich nicht nur nativ an (optionaler Inhalt, kein Kontextmenü von Drittanbietern), sondern können auch Anzeigencode, HTML5-Videos, Tooltips, Bilder, Karten und Formulare hinzufügen, jede Seite verfolgen und mit Hunderten vergleichen. Eine übersichtliche Bibliothek, die für die Vernetzung zusammengestellt wurde.
***Schlüsselwörter dieses Artikels: turn.js-Attributwert, Verwendung, Democode (siehe Anhang am Ende des Artikels~~).
Der Implementierungseffekt ist wie folgt
Offizieller Beispielcode:
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:
Schritt 1: Denken Sie daran, sich vorzustellen die JQ-Datei (1.3 oder höher) zuerst Nur die Version ist in Ordnung~~)
Schritt 2: Führen Sie die Datei turn.js ein, die von der offiziellen Website heruntergeladen werden kann (offizielle Adresse: http://www.turnjs.com/)
Schritt 3: Als nächstes können Sie unseren Protagonisten turn.js verwenden~~Der Code lautet wie folgt↓↓↓
<script type = “ text / javascript” >
$（“ #flipbook”）.turn（{ 宽度：400， 高度：300， autoCenter：是 }）;
</ script>Hinweis: Die Klasse hard kann als (erstes und letztes) Cover eines Buches verstanden werden
✓ Gilt für iPad und iPhone.
✓ Einfache, schöne und leistungsstarke API.
✓ Ermöglicht das dynamische Laden von Seiten über Ajax-Anfragen.
✓ Reiner HTML5/CSS3-Inhalt.
✓Zwei Übergangseffekte.
✓ Funktioniert in älteren Browsern wie IE 8 mit turn.html4.js
jQuery 1.3 oder höher.
Browser-Unterstützung
Safari 5 Chrome 16 Firefox 10 IE 10, 9, 8
Geräte
✓ Alle iOS (iPad, iPhone, iPod)
✓ Android (Chrome für Android)
Turn.js 4 drin Im Kern wurden eine Reihe wichtiger Leistungsverbesserungen vorgenommen.
✓ Jetzt ist der Effekt auf der Browserplattform flüssiger.
✓ Die neue DOM-Komposition garantiert unabhängig von der Seitengröße die gleiche Leistung.
turn.html4.js – HTML4-Version von turn.js.
zoom.js – Neue Zoomfunktionalität für turn.js, siehe Beispiele.
Scissors.js – turn.js ist in zwei Teile unterteilt.
hash.js – Steuern Sie den Navigationsverlauf mithilfe von PushState- und URI-Hashes.
turn.js API ist bequem als UI-Plugin für jQuery aufgebaut, das Zugriff auf eine Reihe von Funktionen bietet und es Ihnen ermöglicht, Benutzerinteraktionen zu definieren.
Das vollständige Dokument gibt es hier und auch im PDF-Format.
Optionen
Beschleunigung
AutoCenter automatische Zentrierung
Richtung Richtung
Anzeige Anzeige
Dauer Zeit
Verläufe Farbverlauf
Höhe Höhe
Erhebung
Seitenseiten
Seiten
drehenEcken
Beim Ausführen der Funktion
Breite Breite
Zoom Vergrößern und Verkleinern
Eigenschaften
Größe
Optionen
Ansicht Ansicht
Zoom Vergrößern
deaktivieren
hatSeite
nächste
ist
Seite
Seiten
peel
vorherige
Bereich
Seite entfernen
Größe ändern
Größe
Stopp
Version
Zoom
Drehen
gedreht
zoomen
.page
.p[0-9]+
.shadow
.sheet
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前端视频】
Das obige ist der detaillierte Inhalt vonEine kurze Analyse, wie Sie die turn.js-Bibliothek von JQuery verwenden, um den Book-Turn-Effekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
