Kürzlich hat der Projektmanager mein Projekt übt. Die Projektanforderungen bestand darin, die Wirkung von Umdrehungen von Büchern zu erreichen. Nachdem ich diese Anforderung gesehen hatte, war ich wirklich verwirrt. Was ist passiert? Ich wurde in Java geboren. Dieses Problem hat mich wirklich verblüfft. Später hatte ich die Anleitung eines Kollegen. Er hatte die PC -Version von Flipping Books schon einmal gemacht. Zu dieser Zeit benutzte er Turn.js. Nachdem er die damit verbundene API überprüft hatte, stellte er plötzlich fest, dass die Verwendung von Turn.js alle meine aktuellen Anforderungen für die Übernahme dieses Projekts vollständig lösen kann. Im Folgenden wird der Herausgeber meine Studienerfahrung mit Ihnen teilen, Sie können sich darauf verweisen
Offizielle Website von Turn.js: http://www.turnjs.com/
Hier sind die Ergebnisse meines Projekts, nachdem es gestartet wurde:
Sind Sie nach dem richtigen Projekt ungeduldig zu wissen, wie dieses Projekt implementiert wird? Machen Sie sich keine Sorgen, lassen Sie mich meinen Entwicklungsprozess im Detail vorstellen:
1. Skriptdateien, die eingeführt werden müssen
<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.2.5.3.min.js"></script><script type="text/javascript" src = "js/main.js"> </script>
2. Teil des HTML -Code
<! DocType html> <html> <head> <meta charset = "utf-8"> <meta http-äquiv = "x-ua-compatible" content = "ie content = "telefon = no"> <meta name = "Apple-Mobile-Web-App-fähige" content = "yes"/> <meta name = "Apple-Mobile-Web-App-Status-Bar" Content = "Black"/> <title> Turn.js erreicht den Effekt von Flipping-Büchern </title> <link rel = "stylesheet" type "type". href = "CSS/Basic.css"/> <script type = "text/javascript" src = "js/jquery.js"> </script> <script type = "text/javascript" src = "js/modernizr.2.3.min src = "js/main.js"> </script> </head> <body> <div> <div> </div> <div> </div> </div> <div> </div> <div> </div> </div> </div> <img Src = "./ Bild/btn.gif". style = "display: keine;"> <div> </div> <div> </div> </div> <img src = "./ Image/btn.gif" style = "display: keine;"> <div> </div> </div> </div> <img src = "./age/btn.gif.gif". style="display:none;"><div></div><div></div></div><img src="./image/btn.gif" style="display:none;"><div></div><div></div></div><img src="./image/btn.gif" style="display: Keine "/> <div> <div> </div> </div> </div> <script> // benutzerdefinierte Imitation iPhone Pop-up-Schicht (Funktion ($) {// iOS bestätigen Boxjquery.fn.Confirm = Funktion (Titel, Option, OKCALL, Cancelcall) {var Defaults = {title: null, // Was textCancelT: // Was textCancelT: // Was textCancelT: //. OK BTN Text}; if (undefined === Option) {option = {};} if ('function'! CancelCall}); var $ dom = $ (this); var dom = $ ('<div>'); var dom = $ ('<div>'). Anhang (DOM); var dom_content = $ ('<div>'). $ ('<a href = "#"> </a>') .html (o.canceltext) .AppendTO (DOM_BTN); var btn_ok = $ ('<a href = "#"> </a>') .html (O.oktext) .Andto (Dom_Btn); {o.cancelcall (); dom.remove (); e.preventDefault ();}); btn_ok.on ('click', function (e) {o.okcall (); Dom.remove (); E.PreventDeault ();}); Seite $ (". Vorherige Seite"). Bind ("Touchend", function () {var pagecount = $ (". Flipbook"). Turn ("Seiten"); // Gesamtzahl der Seiten var currentpage = $ (". Flipbook"). Oder {$ (". Flipbook"). Turn ('Page', CurrentPage + 1);} else {}}); // Return to Directory Page $ (". // Anzahl der Sprungseiten}, function () {});}); </script> </body> </html>3.. Haupt -JS -Implementierungsteile
// Beurteilen Sie den Typ des Handysfensters. Obere und untere Elastizität von iOS.on ('scroll.elastizität', Funktion (e) {e.preventDefault ();}). On ('TouchMove.elastizität', Funktion (e) {e.preventdefault ();}); DATE_START; var date_end; date_start = getNowFormatDate (); // laden Bild var lade_img_url = ["./image/0001.jpg"," 0006.jpg "," ./ Image/0007.jpg ",",./Image/0008.jpg "," ./ Image/0009.jpg ",". /0011.jpg",","./image/0012.jpg"," /0016.jpg"," ",", "./ Image/0022.jpg", "," ./ Image/0023.jpg ",", " 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/0037.jpg ",",./Image/0038.jpg ",",./Image/0039.jpg "," ./ Image/0040.jpg "," ./ Image/0041.jpg ",]; // Laden page function loading() {var numbers = 0;var length = loading_img_url.length for (var i = 0; i < length; i++) {var img = new Image();img.src = loading_img_url[i];img.onerror = function () {numbers += (1 / length) * 100;}img.onload = function () {numbers += (1 / length) * 100; $ ('. Nummer'). $ ('. Shade'). hide (); var taghtml = ""; für (var i = 1; i <= 41; i ++) {if (i == 1) {taghtml + = '<div id = "erster" style = "Hintergrund: url (Image/00' + (i <10? '0' + i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i: i. No-Repeat; Hintergrundgröße: 100%"> </div> ';} else if (i == 41) {TagHtml + =' <div id =" end "style =" Hintergrund: url (Bild/00 ' + (i <10?' 0 ' + i: i) +' .jpg) center obere no-repeat; Hintergrund-size: 100%"</</</</</</</</</</</</</</</</</</</</</Dives"; style = "Hintergrund: URL (Image/00 ' + (i <10?' 0 ' + i: i) +' .jpg) Center Top No-Repeat; Hintergrundgröße: 100%"> </div> ';}} $ (". Flipbook"). Append (Taghtml); var w = $ (". Graph"). width (); $ (Fenster) .Width (); H = $ (Fenster) .Height (); $ ('. Flipboox'). Breite (w). FlipbookAutocenter: TRUE, WANN: {Turn: Funktion (e, Seite, Ansicht) {if (page ==) {$ (". Btnimg"). CSS ("Anzeige", "None"); "Block"); $ ("mark"). $ (". Flipbook"). Turn ("Seiten"); // Gesamtzahl der Seiten if (Seite == 1) {$ (". Return"). CSS ("Display", "None"); $ (". Btnimg"). "Block"); $ (". Btnimg"). CSS ("Anzeige", "Block");} if (page == 2) {$ (". Katalog"). "None");}}}})} yepnope ({test: modernizr.csstransforms, yep: ['js/turn.js'], vollständig: loadApp});};}}}} function getNowFormatdate () {var date = var seperator. var seperator1 = ";"; ; var strdate = Date.getDate (); if (Monat> = 1 && Monat <= 9) {monat = "0" + monat;} if (strdate> = 0 && strdate <= 9) {strdate = "0" + Strdate;} var currentDate = Date Datum.getMinutes () + seperator2 + Date.getSeconds (); CurrentDate zurückgeben;}4. Endergebnis
Wulin -Internetnutzer erinnern alle daran, auf die Aufmerksamkeit zu schenken: Die Bilder werden beiläufig aus dem Internet heruntergeladen, sodass die Größe der Bilder nicht standardisiert ist. Dies führt zu den Bildern, die beim Surfen auf Ihrem Telefon nicht sehr vollständig sind [es liegt nicht an dem Problem mit dem Schreiben des Codes] !!! Die Bilder im realen Projekt werden der Codeverpackung nicht hinzugefügt. Wenn Sie den besten Effekt sehen müssen, wird empfohlen, dass das Bildgrößendesign: 750*1217 beträgt. Aufgrund meiner begrenzten Zeit und Energie haben die Bilder, die ich in der Demo geschrieben habe, die Bilder nacheinander nicht auf die Größe von 750*1217 geändert.
5. Codeverpackung und Download
http://xiazai.vevb.com/201605/yuanma/turn.js, um einen Buchenturniereffekt zu erzielen (vevb.com) .rar .rar .rar .rar .rar.