Recientemente, el CTO me asignó una tarea para el desarrollo móvil H5. La función principal es lograr efectos de cambio de libros. Después de escuchar las principales necesidades, ¡era cierto en ese momento! ! ! A continuación, intenté usar FullPage.js y Swiper para lograr el efecto de cambio de libros, pero los resultados no fueron muy ideales. Más tarde, recordé que había hecho la versión para PC del efecto de cambio de libros. En ese momento, usé Turn.js. Después de verificar su API relacionada, de repente me di cuenta de que usar Turn.js puede resolver completamente todas mis necesidades actuales para hacerse cargo de este proyecto. Ahora resumiré mi aprendizaje personal de la siguiente manera. Si hay alguna incorrección, ¡los lectores pueden criticarme y corregirme!
Sitio web oficial de Turn.js: http://www.turnjs.com/
Aquí están los resultados de mi proyecto después de que se lance:
Después de ver el proyecto real, ¿está impaciente por saber cómo se implementa este proyecto? No te preocupes, déjame presentar mi proceso de desarrollo en detalle:
1. Archivos de script que deben introducirse
<link rel = "stylesheet" type = "text/css" href = "css/básico.css"/> <script type = "text/javascript" src = "js/jquery.js"> </script> <script type = "text/javascript" src = "js/modernizr.2.3.3.min.js"> <<scriptily type = "text/javaScript" src = "js/main.js"> </script>
2. Parte del código HTML
<! Doctype html> <html> <Head> <Meta Charset = "Utf-8"> <meta http-equiv = "x-ua compatible" content = "ie = edge, chrome = 1"/> <meta name = "Viewport" Content = "width = width de dispositivo, escala inicial = 1.0, user-scalable name = "Format-Detection" Content = "Telephone = no"> <Meta name = "Apple-Mobile-Web-App-Capable" Content = "YES"/> <Meta name = "Apple-Mobile-Web-App-STATUS-BAR" Content = "Black"/> <title> Turn.js logra Efecto de book-Turning </title> <Link Rel = "StylesHeet" Type "/" TitleSSSS ACTIVE LIBRO DE LIBRO </Title> <Link Rel = "StylesHeet" href = "css/básico.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> <div> <div> <div> <div> <div> <div> <div> <div> </div> <div> </div> <div> </div> <div> </div> <img src = "./ image/btn.gif" style = "display: none"/> <div> <iv> </div> </div> </div> <script> // Título de iPhone de iPhone de imitación personalizada (function (Función) OkCall, CancelCall) {Var Defaults = {Title: Null, // What Text CancelText: 'Cancelar', // El texto Btn Oktext: 'Confirmar' // el texto OK BTN}; CancheCall) {CancheCall = $ .Noop; $ ('<div>'). html (o.title) .appendTo (dom1); href = "#"> </a> ') .html (O.OkText) .AppendTo (DOM_BTN); dom.remove (); // Página anterior $ (". AnteriorPage"). Bind ("Touchend", function () {var pageCount = $ (". Flipbook"). Turn ("Pages"); // Número total de páginas var currentPage = $ (". Flipbook"). Turn ("página"); // Página actual If (CurrentPage> = 2) {$ ($ (". } demás { } }); //Nextpage").bind("Touchend ", function () {var pageCount = $ (". Flipbook "). Turn (" Pages "); // Número total de páginas var currentPage = $ (". Flipbook "). Turn (" Page "); // Page actual if (CurrentPage <= PageCount) {$ ($ (". } else {}}); // Regreso a la página de directorio $ (". return"). bind ("touchend", function () {$ (document) .confirm ('¿Está seguro de que desea volver a la página de inicio?', {}, function () {$ (". flipbook"). Turn ('página', 1); }); </script> </body> </html>3. Partes de implementación JS principales
/*** Creado por Chengya el 2016/6/18. */// juzga el tipo de teléfono móvil window.onload = function () {// alert ($ (ventana) .Height ()); var u = navigator.useragent; if (u.indexof ('android')> -1 || u.indexof ('linux')> -1) {// Android Telephone} else if (U.Indexof ('iPhone')> -1) {// Apple Phone // Shield the superior e menor elasticidad de ios.on ('scroll.elasticity', function (e) {e.preventDefault (); }). on ('touchmove.elasticity', function (e) {e.preventDefault ();}); } else if (u.indexof ('windows phone')> -1) {// winphone phone} // preloading carging ();} var date_start; var date_end; date_start = getnowformatDate (); // Carga de imagen Var Loading_img_Url = ["./image/0001.jpg", "./image/0002.jpggg", ", "jpggg". "./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/0019.jpg", "./image/0019.jpg", "./image/0020.jpg", "./image/0021.jpg", "./image/0022.jpg", "./image/0023.jpg", "./image/0024.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",font>//loading página de la página carging () {var números = 0; Var longitud = loading_img_url.length; for (var i = 0; i <longitud; i ++) {var img = new image (); img.src = loading_img_url [i]; img.onerror = function () {números += (1 / longitud) * 100; } img.onload = function () {números += (1 / longitud) * 100; $ ('. Number'). Html (parseint (números) + "%"); console.log (números); if (math.round (números) == 100) {// $ ('. Number'). Hide (); date_end = getNowFormatDate (); var loading_time = date_end - date_start; // Preload Image $ (function ProgressBar () {// Split Image $ ('. SHADE'). '.jpg) Center Top No-Repeat; Strengle-Size: 100%"> </div>';} else if (i == 41) {taghtml + = '<div id =" end "style =" Background: url (imagen/00' + (i <10? '0' + i: i) + '.jpg) Center top-no-repeat; fondo de fondo: 100%%"; taghtml + = '<div style = "fondo: url (imagen/00' + (i <10? '0' + i: i) + '.jpg) Center Top No-Repeat; STULTY-SIZE: 100%"> </div>'; $ (". Flipbook-Viewport"). Show (); // Configurar la función Turn.js LoadApp () {var w = $ (ventana) .width (); var h = $ (ventana) .Height (); $ ('. Flipbook'). Ancho (W) .Height (H); $ (Window) .Resize (function () {w = $ (Window) .Width (); H = $ (Window) .Height (); $ ('. FlipBook'). Turn ({// width width: w, // Height Height: H, // Elevación de elevación: 50, Display: 'Single', // Enable Gradient: verdadero: verdadero // Auto Center este Flipbook Autocum. Turning: Function (E, Page, View) {if (Page == 1) {$ (". Btnimg"). CSS ("Display", "Ninguno"); "Ninguno"); Número de páginas if (página == 1) {$ (". 2) {$ (". }} function getNowFormDate () {var date = new Date (); "0" + Strdate;4. Resultado final
Nota: Las imágenes se descargan casualmente de Internet, por lo que el tamaño de las imágenes no está estandarizado, lo que hace que las imágenes no se complete cuando se navegan en el teléfono [¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ifIle en el código. Las imágenes en el proyecto real no se agregan al empaque del código. Si necesita ver el mejor efecto, se recomienda que el tamaño de la imagen esté diseñado como: 750*1217. Debido a mi tiempo y energía limitados, las imágenes que escribí en la demostración no cambiaron las fotos una por una al tamaño de 750*1217.
Descarga del código fuente: http://xiazai.vevb.com/201606/yuanma/turn.js-fanshu(vevb.com).rar
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.