Une brève analyse de la façon d'utiliser la bibliothèque turn.js de JQuery pour obtenir l'effet tournant du livre

Cet article vous présente la bibliothèque turn.js de jQuery et parle de l'utilisation de la bibliothèque turn.js pour obtenir l'effet de retournement de livre. J'espère que cela sera utile à tout le monde !

Aujourd'hui, je vais partager avec vous turn.js de JQ. Permettez-moi d'abord de présenter brièvement notre protagoniste turn.js aujourd'hui. [Recommandations de tutoriel associées : JQuery Tutorial]

Turn.js est une bibliothèque JavaScript qui combine tous les avantages du HTML5 et peut donner à notre contenu l'apparence d'un livre ou d'un magazine, avec un véritable effet de retournement.

Il utilise HTML5 et CSS3 pour réaliser des effets, il fonctionne donc bien sur les appareils tactiles tels que les appareils iOS (iPad, iPhone, iPod) et les appareils Android~
Turn.js présente tous les avantages d'avoir un vrai contenu HTML par rapport au contenu Flash. Avantages , en plus de vous sentir natif (contenu facultatif, pas de menu contextuel tiers), vous pouvez ajouter du code publicitaire, des vidéos HTML5, des info-bulles, des images, des cartes, des formulaires, suivre chaque page et les comparer avec des centaines. Une bibliothèque soignée mise en place pour le réseautage.

***Mots clés dans cet article : valeur de l'attribut turn.js, utilisation, code démo (voir annexe, en fin d'article~~).

L'effet de mise en œuvre est le suivant

Exemple de code officiel :

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:

• Étape 1 : N'oubliez pas de présenter le fichier JQ (1.3 ou supérieur) d'abord Seule la version est OK~~)

• Étape 2 : Introduisez le fichier turn.js, qui peut être téléchargé depuis le site officiel (adresse officielle : http://www.turnjs.com/)

• Étape 3 : Ensuite, vous pouvez utiliser notre protagoniste turn.js~~Le code est le suivant↓↓↓

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

Remarque : la classe hard peut être comprise comme la (première et dernière) couverture d'un livre

• Caractéristiques

✓Applicable à l'iPad et à l'iPhone.
✓ API simple, belle et puissante.
✓ Permet le chargement dynamique des pages via des requêtes Ajax.
✓Contenu HTML5/CSS3 pur.
✓Deux effets de transition.
✓ Fonctionne dans les navigateurs plus anciens comme IE 8 avec turn.html4.js

• Nécessite

jQuery 1.3 ou supérieur.
Prise en charge du navigateur
Safari 5 Chrome 16 Firefox 10 IE 10, 9, 8
Appareils
✓ Tous iOS (iPad, iPhone, iPod)
✓ Android (Chrome pour Android)

• Améliorations

Turn.js 4 dedans Une série d’améliorations importantes des performances ont été apportées au noyau.
✓ Désormais, l'effet est plus fluide sur la plateforme du navigateur.
✓ La nouvelle composition DOM garantit les mêmes performances quelle que soit la taille de la page.

• Complément

turn.html4.js - Version HTML4 de turn.js.
zoom.js - Nouvelle fonctionnalité de zoom pour turn.js, voir exemples.
Scissors.js - turn.js est divisé en deux parties.
hash.js - Contrôlez l'historique de navigation à l'aide des hachages pushState et URI.

• Documentation API

L'API turn.js est commodément conçue comme un plugin d'interface utilisateur pour jQuery, qui donne accès à un ensemble de fonctionnalités et vous permet de définir les interactions des utilisateurs.
Le document complet est disponible ici ou au format PDF.

Options

• accélération

• autoCenter centrage automatique

• direction direction

• affichage affichage

• durée temps

• dégradés dégradé

• hauteur hauteur

• élévation

• page pages

• pages

• tourner les coins

• lors de l'exécution de la fonction

• largeur largeur

• zoom zoomer et dézoomer

Propriétés

• animation animation

• direction direction

• affichage affichage

• désactivé

• page page

• pages

• taille

• options

• vue vue

• zoom zoom avant

Méthode méthodes

• addPage

• center

• destroy

• direction

• affichage

• désactiver

• hasPage

• suivant

• est

• page

• pages

• peel

• précédente

• gamme

• supprimer la page

• redimensionner

• taille

• stop

• version

• zoom

Événements

• manquant

• commence

• tourner

• tourné

• zooming

• Classe CSS Classes

• .même

• .fixé

. dur

• .impair

• .propre -taille

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!