Недавно менеджер проекта практиковал мой проект. Требования к проекту состояли в том, чтобы достичь эффекта переворачивания книг. Увидев это требование, я был очень смущен. Что случилось? Я родился в Яве. Эта проблема действительно озадала меня. Позже у меня было руководство коллеги. Он делал версию Flipping Books с ПК. Он использовал Turn.js в то время. После проверки связанных с ним API он внезапно понял, что использование Turn.js может полностью решить все мои текущие потребности в принятии этого проекта. Ниже редактор поделится с вами моим опытом обучения, вы можете ссылаться на это
Официальный веб -сайт Turn.js: http://www.turnjs.com/
Вот результаты моего проекта после его запуска:
После просмотра фактического проекта вам не терпится знать, как реализован этот проект? Не волнуйтесь, позвольте мне подробно представить свой процесс разработки:
1. Файлы сценариев, которые необходимо ввести
<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.5.5. type = "text/javascript" src = "js/main.js"> </script>
2. Часть HTML -кода
<! Doctype html> <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-совместимый" content = "ie = edge, chrome ="/> <meta name = "viewport" content = "width = width-width, начальная шкала =., Пользовательский scalable = no"/> <meta-det name = "meta-det nametection =" meta-detemetection = "meta-detection =" meta-detection = "meta-detection =" meta-detection = "meta-detection =" meta-det. content = "thene = no"> <meta name = "Apple-mobile-web-app-capable" content = "yes"/> <meta name = "Apple-mobile-web-app-status-bar-стиль" content = "black"/> <title> turn.js достигает эффекта перевернутых книг </tite> <link relshietse "type-exthiet" typect/c. 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" javascript "javascript" javascript "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 = "./. style = "Display: none;"> <div> </div> <div> </div> </div> <img src = "./ image/btn.gif" style = "display: none;"> <div> </div> <div> </div> </div> <img src = "././btn.gif" Style = "DISPLAY: NONE;"> <div> </div> <div> </div> </div> <img src = "./ image/btn.gif" style = "display: none;"> <viv> </div> <div> </div> </div> <img src = "./ image/btn.gif" none "/> <div> <div> </div> </div> </div> <script> // Пользовательская имитация iPhone Pop-Up Layer (function ($) {// Подтверждение iOS boxjquery.fn.confirm = function (заголовок, опция, okcall, cancelcall) {var defaults = tite: null, // what what a andceltext stexlextemlest 'textkeltext {var default // OK BTN Text}; if (undefined === Option) {option = {};} if ('function'! = typeof okCall) {okcall = $ .noop;} if ('function'! = typeof cancelcall) {cancelcall = $ .noop;} var o = $ .extend (default CancelCall: CancelCall}); var $ dom = $ (this); var dom = $ ('<div>'); var dom = $ ('<div>'). appendto (dom); var dom_content = $ ('<div>'). html (o.title). Appendto (dom); var dom_bt = $ ('<div>. btn_cancel = $ ('<a href = "#"> </a>') .html (o.canceltext) .appendto (dom_btn); var btn_ok = $ ('<a href = "#"> </a>') .html (o.oktext) .appendto (dom_btn); {o.cancelcall (); dom.remove (); e.preventdefault ();}); btn_ok.on ('click', function (e) {o.okcall (); dom.remove (); e.preventdefault ();}); dom.appendto ($ ('body')); Страница $ (". предыдущая страница"). Bind ("touchend", function () {var pagecount = $ (". Flipbook"). Turn ("страницы"); // Общее количество страниц var currentpage = $ (".. Flipbook"). Turn ("Page"); // Current Page If (CurrentPage> = 2) {$ (". {}}); // Следующая страница $ (".. Nextpage"). Bind ("touchend", function () {var pagecount = $ (".. Flipbook"). Turn ("страницы"); // Общее количество страниц var page page = $ (".. {$ (". Flipbook"). Turn ('page', currentPage + 1);} else {}}); // возвращение к странице каталога $ (". return"). Bind ("touckend", function () {$ (document) .confirm ('вы уверены, что хотите вернуться на домашнюю страницу? // количество страниц прыжков}, function () {});}); </script> </body> </html>3. Части реализации Main JS
// Судить тип окна мобильного телефона.onload = function () {//alert($(window).height()); Var u = navigator.useragent; if (u.indexof ('android')> -1 || u.indexof ('linux')> -1) {// Android Phone} else eLex If (U.Index ('iPhone')> -1) {// Android} else If (u.index (')> -1)> -1) {// android} Телефон // Экранируйте верхнюю и нижнюю эластичность ios.on ('scroll.elasticity', function (e) {e.preventDefault ();}). On ('touchmove.elasticity', function (e) {e.preventdefault ();});} else if (u.indexof ('windows phone')> -1) загрузка ();} var date_start; var date_end; date_start = getNowformatdate (); // Загрузка изображения var loading_img_url = [. ». 0006.jpg "," ./ Image/0007.jpg ",",./Image/0008.jpg "," ./ Image/0009.jpg "," ./ Image/0010.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/0018.jpg","./image/0019.jpg","./image/0020.jpg","./image/0021.jpg ",", "./ Image/0022.jpg", "," ./ Image/0023.jpg ",", "./ Image/0024.jpg", "," ./ Image/0025.jpg ",", "./ Image/0026.jpg", "./ Image e/0027.jpg ",",./image/0028.jpg "," ./ Image/0029.jpg "," ./ Image/0030.jpg "," ./ Image/0031.jpg "," ./ Image/0031.jpg ",./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 ",]; // нагрузка Функция страницы загрузка () {var number = 0; var length = loading_img_url.length for (var i = 0; i <length; i ++) {var img = new image (); img.src = загрузка_имг_ера 100; $ ('. Number'). Html (parseint (numbers) + "%"); console.log (numbers); if (math.round (numbers) == 100) {// $(.number'). $ ('. Shade'). Hide (); var taghtml = ""; for (var i = 1; i <= 41; i ++) {if (i == 1) {taghtml + = '<div id = "First" style = "founke: url (изображение/00' + (i <10? '0' + i: i) + '. no-repeat; фоновый размер: 100%"> </div> ';} else if (i == 41) {taghtml + =' <div id =" end "style =" url (image/00 ' + (i <10? <div style = "foureny: url (image/00 ' + (i <10?' 0 ' + i: i) +' .jpg) центральный верхний вершина без повторения; фоновый размер: 100%"> </div> ';}} $ (". Flipbook"). $ (". Graph"). Width (); $ (". Flipbook-Viewport"). Show ();}); // Настройка Turn.jsfunction LoadApp () {var w = $ (window) .width (); var h = $ (window) .height (); $ (window) .width (); h = $ (window) .height (); $ ('. Flipboox'). Ширина (w) .height (h);}); $ ('. Flipbook'). Turn ({// widthwidth: w, // heightheight: h, // eafationelevation:,, single: 'single', // ghoightients grade -gradgradients: FlipBookautocenter: true, of: {turning: function (e, page, view) {if (page ==) {$ (". btnimg"). css ("disploy", "none"); $ (". Mark"). css ("Display", "Block");} {$ (". Btnimg"). "Block"); $ (". Mark"). CSS ("Display", "non");} if (page == 41) {$ (". NextPage"). CSS ("Display", "none");} else {$ (".. NextPage"). CSS ("Display", "block");}}, перевернута: e, e, view) {ospe)}},}, werpect (e, veble)}}},},},},}}}, wermole). $ (". Flipbook"). Turn ("pages"); // Общее количество страниц if (page == 1) {$ (". return"). CSS ("Display", "none"); $ (". Btnimg"). CSS ("Display", "none");} Erse {$ (return "). "Block"); $ (". Btnimg"). CSS ("Display", "block");} if (page == 2) {$ (". Catalog"). CSS ("Display", "block");} else {$ (".. Каталог"). CSS ("Display", "Block");};};};};};};}; "none");}}}})} yepnope ({test: modernizr.csstransforms, yep: ['js/turn.js'], полная: loadapp});};}}} function getNowformatdate () {var date = new Date () var seperator1 = ""; "; ; var strdate = date.getDate (); if (month> = 1 && month <= 9) {month = "0" + месяц;} if (strdate> = 0 && strdate <= 9) {strdate = "0" + strdate;} var -currentDate = date.getbleear () + seperator + seperator + seperator + strdate + "date.gethpers2 () seperator + seperator + seperator + strdate +" date.gethpers2 () seperator + seperator + seperator + seperator + strDate + " date.getMinutes () + seperator2 + date.getSeconds (); return currentDate;}4. Окончательный результат
Посети Wulin напоминают каждому обратить внимание: на картинки небрежно загружаются из Интернета, поэтому размер изображений не стандартизирован, что приводит к тому, что изображения не очень полны при просмотре на вашем телефоне [это не из -за проблемы с написанием кода] !!! Картинки в реальном проекте не добавляются в упаковку кода. Если вам нужно увидеть лучший эффект, рекомендуется, чтобы дизайн размера изображения был: 750*1217. Из -за моего ограниченного времени и энергии картины, которые я написал в демонстрации, не изменили картины один за другим на размеры 750*1217.
5. Кодовая упаковка и загрузка
http://xiazai.vevb.com/201605/yuanma/turn.js для достижения эффекта поворота (vevb.com) .rar