简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

Partage de code pour obtenir un effet de changement de page numérique en utilisant la transformation en JavaScript (photo)

黄舟
Libérer： 2017-03-22 14:37:07
original
2749 Les gens l'ont consulté

Cet article présente principalement des exemples d'utilisation de la transformation pour obtenir un effet de rotation de page numérique en JavaScript, qui a une bonne valeur de référence. Jetons un coup d'œil avec l'éditeur ci-dessous

Rendu :

Photo (1) Photo initiale

Image (2) Processus de tournage de page

Image (3) Résultat de tournage de page

Le code est la suivante :

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>transition</title>
 <style>
 #container{ width:500px; height:500px; margin:20px auto; background:#ff0000;
 -webkit-transiton:background 2s linear,width 2s,height 2s;
 -moz-transition:background 2s,width 2s,height 2s;
 -o-transition:background 2s,width 2s,height 2s;
 -ms-transition:background 2s,width 2s,height 2s;
 transition:background 2s,width 2s,height 2s;
 }
 #container:hover{ background: #00ff00;width:200px;height: 200px;}
 #my3dspace{
 -webkit-perspective:800;
 -webkit-perspective-origin:50% 50%;
 overflow: hidden;
 }
 #pagegroup{
 width: 400px;
 height: 400px;
 margin: 0 auto;
 -webkit-transform-style:preserve-3d;
 position: relative;
 }
 .page{
 width: 360px;
 height: 360px;
 padding: 20px;
 background-color: black;
 color: white;
 font-size: 360px;
 font-weight: blod;
 line-height: 360px;
 text-align: center;
 position: absolute;
 }
 #page1{
 -webkit-transform-origin:top;
 transform-origin:top;
 -webkit-transition:-webkit-transform 1s linear;
 transition:transform 1s linear;
 }
 #page2,#page3,#page4,#page5,#page6{
 -webkit-transform-origin:top;
 transform-origin:top;
 -webkit-transition:-webkit-transform 1s linear;
 transition:transform 1s linear;
 -webkit-transform:rotateX(-90deg);
 transform:rotateX(-90deg);
 }
 #op{
 text-align: center;
 margin: 40px auto;
 }
 </style>
</head>
<body>
 <p id="my3dspace">
 <p id="pagegroup">
 <p class="page" id="page1">1</p>
 <p class="page" id="page2">2</p>
 <p class="page" id="page3">3</p>
 <p class="page" id="page4">4</p>
 <p class="page" id="page5">5</p>
 <p class="page" id="page6">6</p>
 </p>
 </p>
 <p id="op">
 <a href="javascript:next()" rel="external nofollow" >next</a> 
 <a href="javascript:prev()" rel="external nofollow" >prev</a>
 </p>
 <script type="text/javascript">
 var curIndex = 1;
 function next(){
 if(curIndex==6)
 return;
 var curPage = document.getElementById("page"+curIndex);
 curPage.style.webkitTransform = "rotateX(90deg)";
 curPage.style.transform = "rotateX(90deg)";
 curIndex ++;
 var nextPage = document.getElementById("page"+curIndex);
 nextPage.style.webkitTransform="rotateX(0deg)";
 nextPage.style.transform="rotateX(0deg)";
 }
 function prev(){
 if(curIndex==1)
 return;
 var curPage =document.getElementById("page"+curIndex);
 curPage.style.webkitTransform="rotateX(-90deg)";
 curPage.style.transform="rotateX(-90deg)";
 curIndex --;
 var prevPage = document.getElementById("page"+curIndex);
 prevPage.style.webkitTransform="rotateX(0deg)";
 prevPage.style.transform="rotateX(0deg)";
 }
 </script>
</body>
</html>
Copier après la connexion

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!

Étiquettes associées：
JavaScript，transform，数字翻页
source：php.cn
Article précédent：Introduction détaillée à l'utilisation de document.cookie en Javascript Article suivant：Exemple de code détaillé pour les fonctions d'usine en JavaScript
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Convertir la date de la chaîne au format de date de type d'entrée J'ai un type d'entrée HTML "datetime-local" que je stocke ensuite dans un champ ...
Depuis 2023-09-05 21:31:29
0
1
273
Comment échapper aux guillemets doubles dans le gestionnaire d'événements onClick de JavaScript Le simple bloc de code ci-dessous fonctionne dans une page HTML statique, mais provoque un...
Depuis 2023-08-22 13:12:47
0
2
249
Mettre à jour les prix en utilisant JS et JSON avec un simple formulaire HTML J'essaie de créer une configuration dans laquelle vous entrez un code postal, soumettez le...
Depuis 2023-08-18 12:38:26
0
1
220
javascript - Comment définir la limite de mots sur la version Web de Sina Weibo Comme titre. Pour ajouter, peut-être que vous ne comprenez pas ce que je veux dire, le nom...
Depuis 2017-07-05 10:44:46
0
3
757
crawler - Comment terminer la page de fonction JavaScript en tournant dans le robot d'exploration Python? Lorsque j'ai exploré une page Web, j'ai remarqué que son changement de page était implémen...
Depuis 2017-06-13 09:24:39
0
2
1188
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！