Récemment, le CTO m'a attribué une tâche pour le développement mobile H5. La fonction principale est d'atteindre les effets de retournement du livre. Après avoir entendu parler des principaux besoins, c'était vrai à ce moment-là! ! ! Ensuite, j'ai essayé d'utiliser FullPage.js et Swiper pour réaliser l'effet tournant au livre, mais les résultats n'étaient pas très idéaux. Plus tard, je me suis souvenu que j'avais fait la version PC de l'effet tournant au livre. À ce moment-là, j'ai utilisé Turn.js. Après avoir vérifié son API connexe, j'ai soudainement réalisé que l'utilisation de Turn.js peut résoudre complètement tous mes besoins actuels pour reprendre ce projet. Maintenant, je vais résumer mon apprentissage personnel comme suit. S'il y a une incorrecte, les lecteurs sont les bienvenus pour me critiquer et me corriger!
Site officiel de Turn.js: http://www.turnjs.com/
Voici les résultats de mon projet après son lancement:
Après avoir vu le projet réel, êtes-vous impatient de savoir comment ce projet est mis en œuvre? Ne vous inquiétez pas, permettez-moi de présenter mon processus de développement en détail:
1. Fichiers de script qui doivent être introduits
<link rel = "stylesheet" type = "text / css" href = "css / basic.css" /> <script type = "text / javascript" src = "js / jQuery.js"> </ script> <script type = "text / javascript" src = "js / modernizr..5.3.min.js"> </ script> Tableau = "script =" js / jscript " src = "js / main.js"> </ script>
2. Partie du code HTML
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge, chrome = 1" /> <meta name = "weffort" contenu = "width = device-width, initial-scale = 1.0, user-scalable = no" name = "format-detection" contenu = "téléphone = no"> <meta name = "Apple-mobile-web-app-capable" contenu = "oui" /> <meta name = "Apple-Mobile-web-app-statu-style" content = "Black" /> <itle> Turn.js Achieves effets books " href = "css / basic.css" /> <script type = "text / javascript" src = "js / jQuery.js"> </ script> <script type = "text / javascript" src = "js / modernizr.2.5.3.min.js"> </ script> <script type = "text / javascript" src = "js / main.js"> </ script> </ head> <body> <div> <div> <div> </ div> <v> </ div> <v> </div> </ div> </ div> </ div> </ div> </v> </vish <div> </ div> <div> </ div> <div> </div> <div> </ div> <img src = "./ image / btn.gif" style = "display: non" /> <v> <div> </div> </ div> </div> <prict> // imitation personnalisée iPhone Pop-up couche (fonction ($) {//oos confirme la boîte jQQUery.fn.confirm = function (Tite OKCALL, COMBALLAGE) {var par défaut = {Title: NULL, // What Text AnnuleTex. {COMBATUREUX = $ .NOOP;} var o = $ .Exttend (par défaut, {title: title, okcall: okcall, annuler: $ ('<div>'). href = "#"> </a> ') .html (o.oktext) .appendto (dom_btn); Dom.Remove (); E.PreventDefault ();}); // Page précédente $ (". PREVERPAGE"). BIND ("TouchEnd", fonction () {var PageCount = $ (". FlipBook"). Turn ("pages"); // Nombre total de pages var currentPage = $ (". FlipBook"). Turn ("Page"); // Page en cours If (CurrentPage> = 2) {$ ".". FlipBook "). } autre { } }); //NextPage": } else {}}); }); </cript> </ body> </html>3. Pièces de mise en œuvre de la JS principale
/ ** * Créé par Chengya le 2016/6/18. * /// juge le type de téléphone mobile window.onLoad = function () {// alert ($ (window) .Height ()); var u = Navigator.UserAgent; if (U.Indexof ('Android')> -1 || U.Indexof ('Linux')> -1) {// Phone Android} else if (U.Indexof ('iPhone')> -1) {// Apple Phone // Shield L'élasticité supérieure et inférieure d'iOS.on ('Scroll.Elastority', fonction (e) {e.PreventDefault (); }). sur ('TouchMove.Elasticity', fonction (e) {e.PreventDefault ();}); } else if (U.Indexof ('Windows Phone')> -1) {// winphone Phone} // Preloading Loading ();} var date_start; var date_end; date_start = getNowFormatDate (); // Chargeing Image var Loading_img_Url = ["./Image/0001.jpg", "./image/0002.jpg", "./image/0003.jpg", "./image/0004.jpg", "./image/0005.jpg", "./image/0006.jpg", "./image/0007.jpg", "./image/0008.jpg", "./image/0009.jpg", "./image/0010.jpg", "./image/0011.jpg", "./image/0012.jpg", "./image/0013.jpg", "./image/0014.jpg", "./image/0015.jpg", "./image/0016.jpg", "./image/0017.jpg", "./image/0018.jpg". "./image/0019.jpg", "./image/0019.jpg", "./image/0020.jpg", "./image/0021.jpg", "./image/0022.jpg", "./image/0023.jpg", "./image/0024.jpg", "./image/0025.jpg". "./image/0026.jpg", "./image/0027.jpg", "./image/0028.jpg", "./image/0029.jpg", "./image/0030.jpg", "./image/0031.jpg", "./image/0032.jpg", ". "./image/0032.jpg", "./image/0033.jpg", "./image/0034.jpg", "./image/0035.jpg", "./image/0036.jpg", "./image/0037.jpg", "./image/0038.jpg", ". "./image/0040.jpg", "./image/0041.jpg", var longueur = charging_img_url.length; for (var i = 0; i <length; i ++) {var img = new image (); img.src = charging_img_url [i]; img.onerror = function () {nombres + = (1 / longueur) * 100; } img.onload = function () {nombres + = (1 / longueur) * 100; $ ('. Numéro'). HTML (PARSEIINT (NUMBRES) + "%"); console.log (nombres); if (math.round (nombres) == 100) {// $ ('. Numéro'). Hide (); date_end = getNowFormatDate (); var chargement_time = date_end - date_start; // Preload Image $ (fonction ProgressBar () {// Split Image $ ('. Shade'). Hide (); var taghtml = ""; for (var i = 1; i <= 41; i ++) {if (i == 1) {taghtml + = '<div id = "First" style = "background: ull (Image / 00' + (i <10? ' '.jpg) Centre supérieur sans répétition; Background-Size: 100% "> </div>';} else if (i == 41) {taghtml + = '<div id =" end "style =" background: url (image / 00' + (i <10? '0' + i: i) + '.jpg) central top no-repeat; background-size: 100% ">; Taghtml + = '<div style = "Background: URL (image / 00' + (i <10? '0' + i: i) + '.jpg) Top No-Repeat; Background-Size: 100%"> </ div>'; $ (". FlipBook-Viewport"). Show ();}); // Configurez la fonction Turn.js LoadApp () {var w = $ (fenêtre) .width (); var h = $ (fenêtre) .Height (); $ ('. flipbook'). largeur (w) .Height (h); $ (fenêtre) .resize (function () {w = $ (window) .width (); h = $ (window) .Height (); $ ('. flipbook'). Turn ({// width width: w, // hauteur hauteur: h, // élévation élévation: 50, affiche: 'single', // permette (E, page, vue) {if (page == 1) {$ (. (Page == 41) {$ (". NextPage"). CSS ("Affichage", "Aucun");} else {$ (". == 1) {$ (. $ (". Catalogue"). CSS ("Affichage", "Block"); getNowFormatDate () {var date = new date (); Strdate;} var currentDate = date.getlyar () + seperator1 + mois + seperator1 + strdate + "" + date.Gethours () + seperator2 + date.getMinutes () + seperator2 + date.getSeconds ();4. Résultat final
Remarque: Les images sont téléchargées avec désinvolture à partir d'Internet, donc la taille des images n'est pas standardisée, ce qui rend les images pas très complètes lors de la navigation sur le téléphone [ce n'est pas due au problème avec l'écriture de code] !!! Les images du projet réel ne sont pas ajoutées à l'emballage de code. Si vous avez besoin de voir le meilleur effet, il est recommandé que la taille de l'image soit conçue comme suit: 750 * 1217. En raison de mon temps et de mon énergie limités, les photos que j'ai écrites dans la démo n'ont pas changé les photos une par une à une taille de 750 * 1217.
Téléchargement du code source: http://xiazai.vevb.com/201606/yuanma/turn.js-fanshu(vevb.com).rar
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.