Recentemente, o gerente de projeto praticou meu projeto. Os requisitos do projeto foram alcançar o efeito de lançar livros. Depois de ver esse requisito, fiquei realmente confuso. O que aconteceu? Eu nasci em Java. Esse problema realmente me surpreendeu. Mais tarde, tive a orientação de um colega. Ele já havia feito a versão para PC de lançar livros antes. Ele usou Turn.js naquela época. Depois de verificar sua API relacionada, ele de repente percebeu que o uso do Turn.js pode resolver completamente todas as minhas necessidades atuais para assumir esse projeto. Abaixo, o editor compartilhará minha experiência de estudo com você, você pode se referir a ele
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
<! Doctype html> <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = borda, chrome ="/> <meta name = "viewport" content = "width = width = device-width, scale. Content = "Telephone = Não"> <meta name = "Apple-Mobile-Web-Appable" Content = "Sim"/> <meta name = "Apple-Mobile-Web-App-Status-Bar-Bar" Content = "Black"/> <title> Turn.js atinge o efeito dos livros de flipping </title> <link "" Styleseet " 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> </ad Head> <body> <div> <div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> <mg> src =. style = "Display: Nenhum;"> <div> </div> <div> </div> </div> <img src = "./ image/btn.gif" style = "display: nenhum;"> <div> </div> <div> </div> </div> <img src = "/ imagem/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 = "/ imagem/btn.gif "" Nenhum "/> <div> <div> </div> </div> </div> <cript> // IMITAÇÃO PERSONALIZADA IPOPHT POP-UP CAMADOR (function ($) {// iOS Confirme Boxjquery.fn.confirm = function (title, opção, okcall, cancelcall) {varaxts = {title: Null, WhatCanct, WhatCancl, textCall) {Varx. 'Confirmar' // O OK BTN Text}; if (undefined === Option) {option = {};} if ('function'! = Typeof okCall) {okCall = $ .noop;} if ('function'! cancelcall: cancelcall}); var $ dom = $ (this); var dom = $ ('<div>'); var dom = $ ('<div>'). AppendTo (dom); var dom_content = $ ('<div>'). html (o.title) .apn); btn_cancel = $ ('<a href = "#"> </a>') .html (o.cancelText) .appendTo (dom_btn); var btn_ok = $ ('<a href = "#"> </a>) .html (o.oktext). (e) {o.cancelCall (); dom.remove (); e.preventDefault ();}); btn_ok.on ('click', function (e) {o.okcall (); dom.remove (); e.preventDefault ();}););); página $ (". AnteriorPage"). Bind ("Toukend", function () {var pageCount = $ (". FlipBook"). Turn ("Páginas"); // Número total de páginas var currentPage = $ (". Flipbook". {}}); // Próxima página $ (". NextPage"). Bind ("Toukend", function () {var pageCount = $ (". FlipBook"). Turn ("Páginas"); // Número total de páginas Var CurrentPage = $ (". Flipbook"). {$ (". FlipBook"). Turn ('Page', CurrentPage + 1);} else {}}); // retorna à página de diretório $ (". Return"). Bind ("TouqueNend", function () {$ (document) .confirm ('tem certeza que deseja retornar ao homepage?', {}, {}, funct (funct) (', você deseja retornar ao homepage?', {}, {}, funct ('. // Número de páginas de salto}, function () {});}); </script> </body> </html>3. Principais peças de implementação do JS
// julgue o tipo de window do telefone celular.onload = function () {//alert(gly(Window).Height(); a elasticidade superior e inferior do iOS.on ('scroll.Elasticity', function (e) {e.preventDefault ();}). date_start; var date_end; date_start = getNowFormatDate (); // carregando imagem var loading_img_url = ["./image/0001.jpg","."./image/0002.jpg","."./image/0003.jpg","."./image/0004.jpg","./image/0005.jpg",7./image/image/image/image/image/image/image/image/image/image/0005.jpg",/5 0006. /0011.jpg","."./Image/0012.jpg","."./Image/0013.jpg",","./Image/0014.jpg","./Image/0015.jpg"."./Image /0016.jpg"."./image/0017.jpg","./image/0018.jpg"."./Image/0019.jpg"."./image/0020.jpg"./image/0021.jpg ",", "./ imagem/0022.jpg", "," ./ imagem/0023.jpg ",", "./ imagem/0024.jpg", "./ imagem/0025.jpg", "" ./ image/0026.jpg " e/0027.jpg ",",./image/0028.jpg "," ./ imagem/0029.jpg "," ./ image/0030.jpg "," ./ imagem/0031.jpg "," ./ Image/0031.jpg ",./image e/0032.jpg ",", ",./Image/0033.jpg", ", ./ Image/0034.jpg", "," ./ imagem/0035.jpg ",", ./ imagem/0036.jpg "," ./ Image/0037.jpg ",",./Image/0038.jpg ",",./Image/0039.jpg "," ./ Image/0040.jpg "," ./ Image/0041.jpg ",]; // carregamento Função de página Carregamento () {var números = 0; var comprimento = carregamento_img_url.length for (var i = 0; i <comprimento; i ++) {var iMg = new Image (); img.src = loading_img_url [i]; img.ONerror = function () {Numbers += (1 / Length) * 100; 100; $ ('. Número'). Html (parseint (números) + "%"); console.log (números); if (math.round (números) == 100) {//$('.number'.hide(_start; $ ('. Shade'). hide (); var taghtml = ""; para (var i = 1; i <= 41; i ++) {if (i == 1) {taghtml + = '<div id = "primeiro" style = "background: url (imagem/00' + (i <10? '0' + i: i: i). No-repetir; tamanho de fundo: 100%"> </div> ';} else if (i == 41) {taghtml + =' <div id =" end "style =" background: url (imagem/00 ' + (i <10?' 0 ' + i: i) +' .jpg) centralize o top não-rEpeat; <div style = "Antecedentes: url (imagem/00 ' + (i <10?' 0 ' + i: i) +' .jpg) Centro superior sem repetição; tamanho de fundo: 100%"> </div> ';}} $ (". FlipBook"). Appender (taghtml); var w = (". $ (janela) .width (); h = $ (janela) .Height (); $ ('. Flipboox'). largura (w) .Height (h);}); $ ('. Flipbook'). FlipBookautocenter: true, quando: {Turning: function (e, página, view) {if (página ==) {$ (".. "Block"); $ (". Mark"). CSS ("Display", "None");} if (Page == 41) {$ (". NextPage"). CSS ("Display", "Nenhum");); mais: ($ ($ (". $ (". FlipBook"). Turn ("Páginas"); // Número total de páginas if (página == 1) {$ (". Return"). CSS ("Display", "nenhum"); $ (". "Block"); $ (". Btnimg"). CSS ("Display", "Block");} if (Page == 2) {$ (". Catalog"). CSS ("Display", "Block");} else {$ (". Catalog"). CSS ("Exibir", "Block"); "nenhum");}}}})} yepnope ({test: modernizr.csstransforms, sim: ['js/turn.js'], completo: loadApp});};}}} função ""; var strdate = date.getDate (); if (mês> = 1 && me mês <= 9) {Month = "0" + mês;} if (strdate> = 0 && strdate <= 9) {strDate = "0" + strDate;} var currentDate = date. + seperator + Mense + Seperator + Seperator + date.getminutes () + Seperator2 + date.getSeconds (); retorna currentDate;}4. Resultado final
Os internautas Wulin lembram a todos que prestem atenção: as fotos são baixadas casualmente da Internet, para que o tamanho das imagens não seja padronizado, o que leva às imagens não muito completas ao navegar no seu 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 design do tamanho da imagem seja: 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.
5. Embalagem de código e download
http://xiazai.vevb.com/201605/yuanma/turn.js para obter efeito de tira de livro (vevb.com) .ra