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>
Copier après la connexion
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>Copier après la connexion
Remarque : la classe hard peut être comprise comme la (première et dernière) couverture d'un livre
✓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
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)
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.
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.
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
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>Copier après la connexion
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
