Recientemente, el gerente del proyecto practicó mi proyecto. Los requisitos del proyecto fueron lograr el efecto de voltear libros. Después de ver este requisito, estaba realmente confundido. ¿Qué pasó? Nací en Java. Este problema realmente me perturbó. Más tarde, tuve la guía de un colega. Había hecho la versión para PC de voltear libros antes. Usó turno.js en ese momento. Después de verificar su API relacionada, de repente se dio cuenta de que usar Turn.js puede resolver completamente todas mis necesidades actuales para hacerse cargo de este proyecto. A continuación, el editor compartirá mi experiencia de estudio con usted, puede consultarlo.
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="/><meta name="viewport" content="width=device-width, initial-scale=., user-scalable=no"/><meta name="format-detection" content = "phone = no"> <meta name = "Apple-Mobile-Web-App-Capable" Content = "Yes"/> <Meta name = "Apple-Mobile-Web-App-status-Bar-Style" Content = "Black"/> <title> Turn.js logra el efecto de los libros de volteo </title> <link-re-"Stylesheet" Type = "Text/css" "" "Text/css" "" " 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> <img src = "./ image/btn.gif" " style = "Display: None;"> <iv> </div> <div> </div> </div> <img src = "./ image/btn.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: None;"> <Div> </div> <Div> </div> </div> <img src = "./ Image/btn.gif" stande = "Display: visual ninguno "/> <div> <div> </div> </div> </div> <script> // la capa emergente de iPhone de imitación personalizada (function ($) {// iOS confirma BoxJQuery.fn.confirm = function (title, opción, okcall, cancelcall) {var predeterminado = {title: null, // qué textExText: 'Cancel itheKnt'//the the Cancel Btn ':' ok btn text}; if (undefined === option) {option = {};} if ('function'! = typeof okcall) {okcall = $ .Noop;} if ('function'! = typeof cancelcall) {cancelcall = $ .Noop;} var o = $ .extend (predeterminado, opción, {Título: Título, OkCall: OkCall, CancillCall, TancelCall, CancillCall: cancelCall}); var $ dom = $ (this); var dom = $ ('<div>'); var dom = $ ('<div>'). appendTo (dom); var dom_content = $ ('<div>'). html (o.title). dom); var dom_btn = $ ('<div>). appendTo (dom); var btn_celn = $ ('<<a href = "#"> </a>') .html (o.cancelText) .AppendTo (dom_btn); var btn_ok = $ ('<a href = "#"> </a>') .html (o.okText). {o.cancelcall (); dom.remove (); e.preventDefault ();}); btn_ok.on ('click', function (e) {o.okcall (); dom.remove (); e.preventDefault ();}); dom.appendTo ($ ('cuerpo'); regreso $;};};}) (jQuera); Página $ (". AnteriorPage"). Bind ("Touchend", function () {var pageCount = $ (". Flipbook"). Turn ("Pages"); // Número total de páginas var CurrentPage = $ (". Flipbook"). Turn ("Page"); // Página actual if (CurrentPage> = 2) {$ (". {}}); // página siguiente $ (". NextPage"). 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 <= PagEcount) {$ (". Flipbook"). Turn ('Page', currentPage + 1);} else {}}); // Regreso a la página de directorio $ (". return"). bind ("touchend", function () {$ (document) .confirm ('¿Está seguro de que desea que regrese a la página inicio?', {}, function () {$ ("." Flipbook "). // Número de páginas de salto}, function () {});}); </script> </body> </html>3. Partes de implementación JS principales
// juzga el tipo de ventana del teléfono móvil.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 Teléfono // protege la elasticidad superior e inferior de iOS.on ('scroll.elasticity', function (e) {e.preventDefault ();}). on ('touchmove.elasticity', function (e) {e.preventDefault ();});} else if (u.indexof ('windows phone')> -1) {// winfault} ///////////////////////////////a prelo // loading ();} var date_start; var date_end; date_start = getNowFormatDate (); // Carga de imagen var Loading_img_url = ["./Image/0001.jpg",","./image/0002.jpg",","./image/0003.jpg",",endo 0006.jpg "," ./ Image/0007.jpg ",",./Image/0008.jpg "," ./ Image/0009.jpg "," ./ Image/0010.jpg "," ./ Image/0010.jpg "," ./ Image/ /0011.jpg",","./iMage/0012.jpg",",endo /0016.jpg","./image/0017.jpg",endo "", "," ./ Image/0022.jpg ",", "./ Image/0023.jpg", "," ./ Image/0024.jpg "," ./ Image/0025.jpg ",", "./ Image/0026.jpg", "./ Imag e/0027.jpg ",",./Image/0028.jpg "," ./ Image/0029.jpg "," ./ Image/0030.jpg "," ./ Image/0031.jpg "," ./ Image/0031.jpg ",./Image/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 ",]; // Load 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 () 100; $ ('. $ ('. shade'). hide (); var taghtml = ""; for (var i = 1; i <= 41; i ++) {if (i == 1) {taghtml + = '<div id = "primer" estilo = "fondo: url (image/00' + (i <10? '0' + i: i) + '' .jpg) centro top No-Repeat; Background-Size: 100%"> </div> ';} else if (i == 41) {taghtml + =' <div id =" end "style =" fondo: url (imagen/00 ' + (i <10?' 0 ' + i: i) +' .jpg) Centro superior no-depreat; de fondo: 100%"> </iv> ';} style = "Background: URL (Image/00 ' + (i <10?' 0 ' + i: i) +' .jpg) Center Top No-Repeat; STUCTE-SIZE: 100%"> </div> ';}} $ (". Flipbook"). Append (Taghtml); var W = $ (". Graph"). Width (); $ (". {w = $ (Window) .Width (); H = $ (Window) .Height (); $ ('. Flipboox'). Width (W) .Height (h);}); $ ('. Flipbook'). Turn ({// widthwidth: w, // heightheight: h, // elevación: exhibición: exhibición: single ', // eNAT Auto Center Este flipbookAutocenter: true, cuándo: {thurning: function (e, page, ver) {if (page ==) {$ (". Btnimg"). Css ("visual "bloque"); $ (". Mark"). Css ("visualización", "ninguno");} if (page == 41) {$ (". $ (". Flipbook"). Turn ("Pages"); // Número total de páginas if (página == 1) {$ (". "bloque"); $ (". btnimg"). css ("visual "Ninguno");}}}})} yepnope ({test: modernizr.csStransforms, yep: ['js/gurn.js'], completo: loadApp});};}}} función getNowFormatDate () {var fecha = nueva fecha (); var oPerator1 = "; var seperator2 ="; ; var strdate = date.getDate (); if (mes> = 1 && mes <= 9) {mes = "0" + mes;} if (strdate> = 0 && strdate <= 9) {strdate = "0" + strdate;} var currentDate = date.getTylyTryar () + seperator + meseperator + strdate + " + date.gethate.gethatet) date.getMinutes () + seperator2 + date.getSeconds (); return currentDate;}4. Resultado final
Los internautas de Wulin recuerdan a todos que presten atención: las imágenes se descargan casualmente de Internet, por lo que el tamaño de las imágenes no está estandarizado, lo que lleva a las imágenes no muy completas cuando se navegan en su teléfono [¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ios 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 diseño del tamaño de la imagen sea: 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.
5. Embalaje de código y descarga
http://xiazai.vevb.com/201605/yuanma/turn.js para lograr un efecto de promover de libros (VEVB.com) .rar