Récemment, le chef de projet a pratiqué mon projet. Les exigences du projet devaient réaliser l'effet du retournement des livres. Après avoir vu cette exigence, j'étais vraiment confus. Ce qui s'est passé? Je suis né à Java. Ce problème m'a vraiment perplexe. Plus tard, j'ai eu les conseils d'un collègue. Il avait déjà fait la version PC de Flipping Books. Il a utilisé Turn.js à ce moment-là. Après avoir vérifié son API connexe, il s'est soudainement réalisé que l'utilisation de Turn.js peut résoudre complètement tous mes besoins actuels pour reprendre ce projet. Ci-dessous, l'éditeur partagera mon expérience d'étude avec vous, vous pouvez vous y référer
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 =" /> <méta-newport = "Viewport" contenu = "width = devine-width, initial-sched =., User-scalable = no" / meta = "formatection =. Content = "téléphone = no"> <meta name = "Apple-Mobile-web-app-capable" content = "Oui" /> <meta name = "Apple-Mobile-web-App-statut-style" Content = "Black" /> <Title> Turn.js Atteint l'effet de Flipping Books </Title> <Link rel = "Styleheet" Type = "Text / Css" 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> <div> </ div> <div> </ div> <div> </ div> <div> </ div> <div> </div> <div> </ div> <img src = "./ Image / btn.gif" style = "Affichage: Aucun;"> <div> </div> <div> </div> </div> <img src = "./ image / btn.gif" style = "affiche: aucun;"> <div> </div> <v> </div> </div> <img src = "./ Image / btn.gif" Style = "Affichage: Aucun;"> <div> </ div> <div> </ div> </div> <img src = "./ image / btn.gif" style = "affiche: aucun;"> <div> </div> <v> </div> </div> <img src = "./ Image / btn.gif" style = "Affichage: Aucun "/> <div> <div> </ div> </ div> </div> <script> // Imitation personnalisée Iphone Pop-up Layer (fonction ($) {// ios confirme boxjQuery.fn.confirm = function (Title, Option, OkCall, CancelCall) {var par défaut = {Title: NULL, // What TextCancetex Texte btn}; if (UNDEFINED === Option) {option = {};} if ('function'! = typeof okcall) {okcall = $ .noop;} if ('function'! = typeof ccelCall) {CANCELCALL = $ .NOOP;} var o = $ .Extend (par défaut, option, {title: title, title, okcall: okcall, CancelCall}); var $ dom = $ (this); var dom = $ ('<v>'); var dom = $ ('<v>'). APPENDTO (DOM); var dom_content = $ ('<v>'). Html (O.Title). $ ('<a href = "#"> </a>') .html (o.cancelText) .APPENDTO (DOM_BTN); var btn_ok = $ ('<a href = "#"> </a>') .html (o.oktext) .APPENDTO (DOM_BTN); btn_cancel.on ('clique {o.cancelCall (); dom.remove (); e.preventDefault ();}); btn_ok.on ('click', fonction (e) {o.okcall (); dom.remove (); e.preventDefault ();}); dom.apprendto ('body'); Page $ (". PREVERPAGE"). BIND ("TouchEnd", fonction () {var PageCount = $ (". FlipBook"). Turn ("pages"); // Nombre total de pages var CurrentPage = $ (". FlipBook"). {}}); // page suivante $ (". NextPage"). Bind ("touchenD", function () {var pageCount = $ (". Flipbook"). Tour ("pages"); // nombre total de pages var currentpage = $ (". Flipbook"). Turn ("page"); // page actuelle if (actuelpage <= pagecount) {$ (". flipbook"). tour ('page', currentpage + 1);} else {}}); // retour à la page du répertoire $ (". return"). bind ("touchenD", function () {$ (document) .confirm ('êtes-vous sûr que vous voulez revenir à la page d'accueil?', {}, function () {$ (".".. // Nombre de pages de saut}, function () {});}); </cript> </ body> </html>3. Pièces de mise en œuvre de la JS principale
// juge le type de fenêtre de téléphone mobile.onload = function () {//alert($(window).height()) ;var u = Navigator.UserAgent; if (u.indexof ('Android')> -1 || U.Indexof ('Linux')> -1) {// THELE Android} else if (U.Indexof ('iPhone')> -1) {// pleatphone / shlind Élasticité inférieure d'iOS.on ('Scroll.Elasticity', fonction (e) {e.PreventDefault ();}). On ('TouchMove.Elasticity', fonction (e) {E.PreventDefault ();});} else if (U.Indexof ('Windows Phone')> -1) date_start; var date_end; date_start = getNowFormatDate (); // Chargement Image var chargement_img_url = ["./image/0001.jpg" ," ,"./image/0002.jpg" ,", ./image/0003.jpg" ,"."./image/0004.jpg" ," 0006.jpg "," ./ image / 0007.jpg ",",. / Image / 0008.jpg "," ./ image / 0009.jpg "," ./ image / 0010.jpg "," ./ image / 0010.jpg "," ./ image / /0011.jpg" ," ,"./image/0012.jpg" ," ,"./image/0013.jpg" ," ," /0016.jpg" ,"./image/0017.jpg" ," ,./image/0018.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 "," ./ Imagine e / 0027.jpg ",",. / image / 0028.jpg "," ./ image / 0029.jpg "," ./ image / 0030.jpg "," ./ image / 0031.jpg "," ./ image / 0031.jpg ",. / image e / 0032.jpg ",", ",. / image / 0033.jpg", "," ./ image / 0034.jpg ",", "./ image / 0035.jpg", "," ./ image / 0036.jpg ",", "./. image / 0037.jpg ",",. / image / 0038.jpg ",",. / image / 0039.jpg "," ./ image / 0040.jpg "," ./ image / 0041.jpg ",]; // Large Fonction Page Charging () {var nombres = 0; var longueur = charging_img_url.length pour (var i = 0; i <longueur; i ++) {var img = new Image (); img.src = chargeing_img_url [i]; img.onerror = function () {nombres + = (1 / longueur) * 100;} img.onload = function () 100; $ ('. Number'). Html (parseInt (nombres) + "%"); console.log (nombres); if (math.round (nombres) == 100) {//$('.Number').Hide() ;date_end = getNowFormatDate (); var Loading_time = Date_end - Date_start; // Préload Image $ () $ ('. Shade'). Hide (); var taghtml = ""; for (var i = 1; i <= 41; i ++) {if (i == 1) {taghtml + = '<div id = "premier" style = "background: url (image / 00' + (i <10? '0' + i: i) + '. NO-REPEAT; Backgrack-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% "> </ div> ';; <div style = "background: url (image / 00 '+ (i <10?' 0 '+ i: i) +' .jpg) central top no-repeat; background-size: 100%"> </ div> ';}} $ (". flipbook"). $ (". graphique"). width (); $ (". flipbook-viswatport"). show ();}); // configurer tour.jsfunction lostApp () {var w = $ (window) .width (); var h = $ (window) .height (); $ ('. flipboox'). width (w) .height (h); $ (window). $ (fenêtre) .width (); h = $ (window) .Height (); $ ('. flipboox'). largeur (w) .height (h);}); $ ('. flipbook'). Turn ({// widthwidth: w, // Heightheight: h, // elevationelevation:, 'single', // flipbookAutocenter: true, when: {tourning: function (e, page, viswe) {if (page ==) {$ (". btnimg"). css ("affiche", "non"); $ (". Mark"). "Block"); $ (". Mark"). CSS ("Affichage", "Aucun");} if (Page == 41) {$ (". NextPage"). CSS ("Affichage", "Aucun");} else {$ (". NextPage"). $ (". flipbook"). tour ("pages"); // nombre total de pages if (page == 1) {$ (". return"). css ("affiche", "non"); $ (". btnimg"). css ("affiche", "non");} else {$ (". return"). "Block"); $ (". btnimg"). css ("affiche", "bloc");} if (page == 2) {$ (". Catalog"). CSS ("affichage", "block");} else {$ (". Catalog"). Modernizr.csstransforms, yep: ['js / tour.js'], complet: loadApp});};}}} fonction getNowformatDate () {var date = new Date (); var seperator1 = ""; var seperator2 = ""; var mois = date.getmonth () +; var strdate = date.getDate (); 9) {mois = "0" + mois;} if (strdate> = 0 && strdate <= 9) {strdate = "0" + strdate;} var currentDate = date.getlyear () + sépator + mois + seperator + stradate + "" + date.Gethours () + Seperator2 + date.getMinites () + seperator2 + date.Getecs (); currentDate;}4. Résultat final
Les internautes Wulin rappellent à tout le monde de faire attention: 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 conduit aux images pas très complètes lorsque vous parcourez sur votre téléphone [ce n'est pas à cause du 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 conception de la taille de l'image soit: 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.
5. Emballage de code et téléchargement
http://xiazai.vevb.com/201605/yuanma/turn.js pour réaliser l'effet de tournage de livres (vevb.com) .rar