Kürzlich hat mir die CTO eine Aufgabe für die Entwicklung der mobilen H5 -Entwicklung zugewiesen. Die Hauptfunktion besteht darin, Buchentwicklungseffekte zu erzielen. Nachdem ich von den Hauptbedürfnissen gehört hatte, war es zu dieser Zeit wahr! ! ! Als nächstes habe ich versucht, Fullpage.js und Swiper zu verwenden, um den Buchentwicklungseffekt zu erzielen, aber die Ergebnisse waren nicht sehr ideal. Später erinnerte ich mich, dass ich die PC-Version des Buchenturniereffekts durchgeführt hatte. Zu dieser Zeit habe ich Turn.js. Nachdem ich die damit verbundene API überprüft hatte, stellte ich plötzlich fest, dass die Verwendung von Turn.js alle meine aktuellen Anforderungen für die Übernahme dieses Projekts vollständig lösen kann. Jetzt werde ich mein persönliches Lernen wie folgt zusammenfassen. Wenn es etwas Falsches gibt, können die Leser mich eingeladen haben, mich zu kritisieren und zu korrigieren!
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-kompatible" content = "ie = edge, Chrome = 1"/> <meta name = "Ansichtsport" content = "widtth = meta-width, initial-scale = 1.0, user-scalable = no"/> < name="format-detection" content="telephone=no"> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <title>Turn.js achieves book-turning effect</title> <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.3.min src="js/main.js"></script></head><body><div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <img src="./image/btn.gif" style="display: none"/> <div> <div> </div> </div></div><script> //Custom imitation iphone pop-up layer(function ($) { //ios confirm box jQuery.fn.confirm = function (title, option, OKCALL, CancelCall) {var defaults = {title: null, was text civilext: 'abbrechen', // Der text text tefined (undefined ===) {option = {}; Cancelcall) {CancelCall = $ .noop; $ ('<div>'). href = "#"> </a> ') .html (O.oktext) .AppendTo (Dom_Btn); Dom.Remove (); // Vorherige Seite $ (". Vorherpage"). Bind ("Touchend", function () {var pagecount = $ (". Flipbook"). Turn ("Seiten"); // Gesamtzahl der Seiten var curordPage = $ (". Flipbook"). } anders { } }); // } else {}}); }); </script> </body> </html>3.. Haupt -JS -Implementierungsteile
/*** Erstellt von Chengya am 6./6/18. */// Richter Mobiltelefontyp Window.onload = function () {// alert ($ (Fenster) .Height ()); var u = navigator.useragent; if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//Android phone} else if (u.indexOf('iPhone') > -1) {//Apple phone//Shield the upper and lower elasticity of ios.on('scroll.elasticity', function (e) { e.preventDefault(); }). on ('TouchMove.elastizität', Funktion (e) {e.preventDefault ();}); } else if (u.Indexof ('Windows Phone')> -1) {// Winphone -Telefon} // Vorladung ();} var DATE_START; var date_end; DATE_START = GetNowFormatDate (); // laden Bild var lade_img_url = ["./image/0001.jpg", ",", ",", ",", ",", ",", ",", ",", ",", ". ". "./image/0011.jpg", "./image/0012.jpg", "./image/0013.jpg", "./image/0014.jpg", ". "./image/0019.jpg", "./image/0019.jpg", "./image/0020.jpg". "./image/0026.jpg", "./image/0027.jpg", "./image/0028.jpg", ". "./image/0032.jpg", "./image/0033.jpg", "./image/0034.jpg". "./image/0040.jpg", "./image/0041.jpg",;//loading Page Funktion lade () {var number = 0; var length = lade_img_url.length; für (var i = 0; i <länge; i ++) {var img = new Image (); img.src = lade_img_url [i]; img.onError = function () {number += (1 / länge) * 100; } img.onload = function () {number += (1 / länge) * 100; $ ('. Nummer'). HTML (ParseInt (Zahlen) + "%"); console.log (nummern); if (math.round (number) == 100) {// $ ('. number'). hide (); DATE_END = GetNowFormatDate (); var lade_time = date_end - date_start; // Vorladung Bild $ (Funktion progressBar () {// Bild $ $ ('. Shade'). Hide (); var taghtml = ""; für (var i = 1; i <= 41; i ++) {if (i == 1) {taghtml += '<div id = "erster" style = "bublidas: i. '.jpg) mittlere obere no-repeat; Hintergrundgröße: 100%"> </div>';} else if (i == 41) {Taghtml + = '<div id =" end "style =" Hintergrund: url (Bild/00' + (i <10? ' taghtml + = '<div style = "Hintergrund: URL (Bild/00' + (i <10? '0' + i: i) + '.jpg) Mittelstufe No-Repeat; Hintergrundgröße: 100%"> </div>'; $ (". Flipbook-viewport"). Show (); // Konfigurieren Sie rurn.js Funktion loadApp () {var w = $ (Fenster) .Width (); var H = $ (Fenster) .Height (); $ ('. Flipbook'). Breite (w) .Height (h); $ (Fenster) .Resize (function () {w = $ (Fenster) .Width (); H = $ (Fenster) .Height (); $ ('. Flipbook'). (E, Seite) {if (Seite == 1) {$ (". Btnimg"). CSS ("Display", "keine"); (Seite == 41) {$ (". NextPage"). CSS ("Display", "keine"); == 1) {$ (". Return"). CSS ("Display", "keine"); $ (". Katalog"). CSS ("Display", "Block"); GetNowFormatdate () {var date = new Date (); StrDate;4. Endergebnis
Hinweis: Die Bilder werden beiläufig aus dem Internet heruntergeladen, sodass die Größe der Bilder nicht standardisiert ist, was die Bilder beim Surfen am Telefon nicht sehr vollständig macht [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 die Größe des Bildes als: 750*1217 ausgelegt ist. 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.
Quellcode herunterladen: http://xiazai.vevb.com/201606/yuanma/turn.js-fanshu(vevb.com).rar
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.