Recentemente, o CTO me atribuiu uma tarefa para o desenvolvimento móvel de H5. A principal função é alcançar efeitos de virar livros. Depois de ouvir das principais necessidades, era verdade naquela época! ! ! Em seguida, tentei usar o FullPage.js e o Swiper para alcançar o efeito que vira o livro, mas os resultados não eram muito ideais. Mais tarde, lembrei-me de que havia feito a versão para PC do efeito que vira o livro. Naquela época, eu usei Turn.js. Depois de verificar sua API relacionada, de repente percebi que o uso do Turn.js pode resolver completamente todas as minhas necessidades atuais para assumir esse projeto. Agora vou resumir meu aprendizado pessoal da seguinte forma. Se houver alguma incorreção, os leitores podem me criticar e me corrigir!
Site oficial do Turn.JS: http://www.turnjs.com/
Aqui estão os resultados do meu projeto após o lançamento:
Depois de ver o projeto real, você é impaciente ao saber como esse projeto é implementado? Não se preocupe, deixe -me apresentar meu processo de desenvolvimento em detalhes:
1. Arquivos de script que precisam ser introduzidos
<link rel = "Stylesheet" type = "text/css" href = "css/basic.css"/> <script type = "text/javascript" src = "js/jQuery.js"> </script> <script type = "text/javincript" src = "js/modernizr.2.2.5.2.5.J.JPTTIPT"> </script> <script = "text/javinscript" src = "js/modernizr.2.2.2.5.2.J.JPTTIPT"> </script> <script = "text/javinscript" src = "js/Modernizr.. type = "text/javascript" src = "js/main.js"> </script>
2. Parte do código HTML
<! Docttype html> <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatível" content = "ie = borda, chrome = 1"/> <meta name = "viewPort" content = "width = device-width> scale name = "formato-detecção" content = "telefone = não"> <meta name = "Apple-mobile-web-appada" content = "sim"/> <meta name = "maçã-mobile-web-app-status-bar-bar" content = "preto"/> <title Turn.js atinge o efeito de reviravolta "</title> </title" <link "" link "link" link "title/title/title/title/title/title" <link "link" link "link" título " href = "css/basic.css"/> <script type = "text/javascript" src = "js/jQuery.js"> </script> <script type = "text/javascript" src = "js/modernizr.3.3.min.js"> </script> < src = "js/main.js"> </script> </head> <body> <div> <div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </divid </miv> </div> </div> </div> </div> </div> </> </> </> <// <div> </div> <div> </div> <div> </div> <div> </div> <img src = "./ image/btn.gif" style = "display: none"/> <div> <div> </.ct> </div> </div> <cript> // IMITAÇÃO CUDDADE IPHONE POPLEER (function ($) {$) goy ({/div> </divript>/i (iSclript iPhone Popphone (. Opção, OkCall, CancelCall) {var defaults = {title: null, // que texto cancelar ! $ ('<div>'). href = "#"> </a> ') .html (O.OKText) .Appendto (dom_btn); DOM.Remove (); // Página anterior $ (". AnteriorPage"). Bind ("Toukend", function () {var pageCount = $ (". FlipBook"). Turn ("Páginas"); // Número total de páginas var currentPage = $ (". Flipbook"). outro { } }); //Nextpage").bind("Touchend ", function () {var pageCount = $ (". Flipbook "). Turn (" páginas "); // Número total de páginas var currentPage = $ (". Flipbook "). {}}); }); </script> </body> </html>3. Principais peças de implementação do JS
/*** Criado por Chengya em 2016/6/18. */// Juiz do tipo de celular tipo Window.OnLload = function () {// alert ($ (janela) .Height ()); var u = navegator.UserAgent; if (u.IndexOF ('Android')> -1 || u.IndexOf ('Linux')> -1) {// Android Phone} else if (u.IndexOF ('iPhone')> -1) {// Apple Phone // proteja a elasicidade superior e inferior de ios.on ('scroll.Elestity', funcionar (função) (e) (e) () (//) (//) (///) a (e a elasticidade superior e a elasicidade superior e a elasticidade ('Proll) (//; }). on ('touchmove.elasticity', function (e) {e.preventDefault ();}); } else if (u.IndexOF ('Windows Phone')> -1) {// winphone Phone} // pré -carregamento carregamento ();} var date_start; var date_end; date_start = getNowFormatDate (); // imagem de carregamento var loading_img_url = ["./image/0001.jpg"; "./image/0003.jpg", "./image/0004.jpg", "./image/0005.jpg", "./image/0006.jpg", "./image/0007.jpg". "./image/0011.jpg", "./image/0012.jpg", "./image/0013.jpg", "./image/0014.jpg". "./image/0019.jpg", "./image/0019.jpg", "./image/0020.jpg", "./image/0021.jpg", "./image/0022.jpg". "./image/0026.jpg", "./image/0027.jpg", "./image/0028.jpg", "./image/0029.jpg", "/image/0030.jpg ", ./image/0031.jpg. "./image/0032.jpg", "./image/0033.jpg", "./image/0034.jpg", "./image/0035.jpg", "./image/0036.jpg". "./image/0040.jpg", "./image/0041.jpg" ,////lloading página função carregando () {var números = 0; var comprimento = carreging_img_url.length; for (var i = 0; i <comprimento; i ++) {var iMg = new Image (); img.src = loading_img_url [i]; img.onerror = function () {números += (1 / comprimento) * 100; } img.onload = function () {números += (1 / comprimento) * 100; $ ('. Número'). html (parseint (números) + "%"); console.log (números); if (Math.Round (números) == 100) {// $ ('. Número'). Hide (); date_end = getNowFormatDate (); var loading_time = date_end - date_start; // pré -carga Imagem $ (função progressBar () {// imagem dividida $ ('. Shade'). Hide (); var taghtml = ""; para (var i = 1; i <= 41; i ++) {if (i == 1) {taghtml += '<div = "primeiro"' '' '' '' '' '(if (i == 1) {taghtml +=' <div = "primeiro" '') '.jpg) Center superior sem repetição; tamanho de fundo: 100%"> </div>';} else if (i == 41) {taghtml + = '<div id =" end "style =" background: url (imagem no center/00' + (i <10? '0' + i: i) + '. taghtml + = '<div estilo = "Background: URL (Imagem/00' + (i <10? ' $ (". Flipbook-viewport"). Show (); // Configure Turn.js function loadApp () {var w = $ (janela) .Width (); var H = $ (janela) .Height (); $ ('. Flipbook'). Largura (W) .Height (H); $ (janela) .Resize (function () {w = $ (janela) .Width (); h = $ (janela) .Height (); $ ('. Flipbook'). Turn ({// largura largura: w, // altura: h, // elevação elevation: 50, exibição: 'ÚNICO', // gradientes de altura dos autores: (e, página, visualização) {if (página == 1) {$ (" (página == 41) {$ (". == 1) {$ ("Return"). CSS ("Display", "Nenhum"); $ (Catálogo "). CSS (Display", "Bloco"); getNowFormatdate () {Var Date = New Date (); strdate;4. Resultado final
NOTA: As imagens são baixadas casualmente da Internet; portanto, o tamanho das imagens não é padronizado, o que torna as imagens não muito completas ao navegar no telefone [não é por causa do problema com a redação do código] !!! As imagens no projeto real não são adicionadas à embalagem de código. Se você precisar ver o melhor efeito, é recomendável que o tamanho da imagem seja projetado como: 750*1217. Devido ao meu tempo e energia limitados, as fotos que escrevi na demo não mudaram as fotos uma a uma do tamanho de 750*1217.
Download do código-fonte: http://xiazai.vevb.com/201606/yuanma/turn.js-fanshu(vevb.com).rar
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.