Eine kurze Analyse, wie Sie die turn.js-Bibliothek von JQuery verwenden, um den Book-Turn-Effekt zu erzielen

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

• Funktionen

✓ 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

• Erfordert

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)

• Verbesserungen

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.

• Complement

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.

• API-Dokumentation

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

• Animierende Animation

  Größe

• Optionen

• Ansicht Ansicht

• Zoom Vergrößern

• Methodenmethode
Seite hinzufügen
Zentrum
Zerstören
Richtung
Anzeige

deaktivieren

• hatSeite

• nächste

• ist

• Seite

• Seiten

• peel

• vorherige

• Bereich

• Seite entfernen

• Größe ändern

• Größe

• Stopp

• Version

• Zoom

• Veranstaltungen Veranstaltungen
Ende
erster
letzter
fehlender
Anfang

Drehen

• gedreht

• zoomen

• CSS-Klassen Klasse Klasse
.sogar
.behoben.
.hart
.ungerade
.eigene -Größe

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

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!