Недавно технический директор назначил мне задачу для мобильной разработки H5. Основная функция заключается в достижении последствий книжного поворота. После того, как я услышал о основных потребностях, это было правдой в то время! ! ! Затем я попытался использовать FullPage.js и Swiper для достижения эффекта обращения книги, но результаты были не очень идеальными. Позже я вспомнил, что я сделал версию ПК с эффектом обращения книги. В то время я использовал 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 = 1"/> <meta name = "viewport" content = "width = device-width, начальная шкала = 1.0, пользовательский scalable = no" meta-det det etmete det-det etmetement = no "meta-det. content = "thene = no"> <meta name = "Apple-mobile-web-app-capable" content = "yes"/> <meta name = "Apple-mobile-web-app-status-bar-стиль" content = "black"/> <tilt> turn.js достигает эффекта Turn-turning </tite> <link rel = "stilesshiet" tyex/css " 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> <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> <div> </div> </div> </div> <croppt> // custom iphone pop-uper ($) {/ios reform. Okcall, CancelCall) {var defalock = {title: null, // Какой текст Canceltext: 'Cancel', // Отмена текста Oktext: 'Подтверждение' // ok text}; CancelCall) {CancelCall = $ .noop; $ ('<div>'). html (o.title). href = "#"> </a> ') .html (o.oktext) .appendto (dom_btn); dom.remove (); // предыдущая страница $ (". Предыдущая страница"). Bind ("touchend", function () {var pagecount = $ (". Flipbook"). Turn ("pages"); // Общее количество страниц var currentpage = $ (". Flipbook"). Turn ("Page"); // Current Page if (CurrentPage> = 2) ($ ($ ($ (". } еще { } }); //Nextpage").bind("touchend ", function () {var pagecount = $ (". Flipbook "). Turn (" страницы "); // Общее количество страниц var currentpage = $ (".. Flipbook "). Turn (" Page "); // текущая страница if (currentPage <= pagecount) ($ ($ '). } else {}}); }); </script> </body> </html>3. Части реализации Main JS
/*** Создано Ченгью 6/6/18. */// Судья тип мобильного телефона. var u = navigator.useragent; if (u.indexof ('android')> -1 || u.indexof ('linux')> -1) {// Android Phone} else if (u.indexof ('iPhone')> -1) {// Apple Phone // eReard верхняя и нижняя эластичность ios.on ('scroll.lasticity', function (e) {e.preventde.on; }). On ('touchmove.elasticity', function (e) {e.preventDefault ();}); } else if (u.indexof ('windows phone')> -1) {// winphone phone} // preloading loading ();} var date_start; var date_end; date_start = getNowformatdate (); // Загрузка изображения var varing_img_url = ["./image/0001.jpg". "./image/0003.jpg", "./image/0004.jpg", "./image/0005.jpg", "./image/0006.jpg", "./image/0007.jpg", "./image/0008.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/0026.jpg", "./image/0027.jpg", "./image/0028.jpg", "./image/0029.jpg", "./image/0030.jpg", "./image/0031.jpg", "./image/0032. "./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",^ ;//sulating function function () {var numbers = 0; var length = loading_img_url.length; for (var i = 0; i <length; i ++) {var img = new image (); img.src = loading_img_url [i]; img.onerror = function () {numbers += (1 / длина) * 100; } img.onload = function () {numbers += (1 / длина) * 100; $ ('. number'). html (parseint (numbers) + "%"); console.log (числа); if (math.round (numbers) == 100) {// $ ('. number'). hide (); date_end = getNowformatdate (); var loading_time = date_end - date_start; // изображение предварительной нагрузки $ (function progressbar () {// разделить изображение $ ('. Shade'). Hide (); var Taghtml = ""; for (var i = 1; i <= 41; i ++) {if (i == 1) {taghtml += '<div id = "first" style = "founal: url (image/00' +(i <10? '.jpg) Центр верхней вершины без повторного размер; taghtml + = '<div style = "founal: url (image/00' + (i <10? '0' + i: i) + '.jpg) Центр. $ (". Flipbook-Viewport"). Show (); // configure turn.js function loadApp () {var w = $ (window) .width (); var h = $ (window) .height (); $ ('. Flipbook'). Ширина (W). Хейт (H); $ (window) .resize (function () {w = $ (window) .width (); h = $ (window) .height (); $ ('.. Flipbook'). Turn ({// ширина ширины: W, // Высота высота: H, // возвышение: 50, отображение: «Одиночный», // Включение Градиентов Function (E, Page, View) {if (page == 1) {$ (". Btnimg"). CSS ("Display", "нет"); if (Page == 41) {$ (". NextPage"). CSS ("Display", "none"); == 1) {$ (". Return"). $ ("Каталог"). CSS ("Display", "Block"); GetNowFormatdate () {var date = new Date (); strdate;4. Окончательный результат
Примечание. Фотографии загружаются небрежно из Интернета, поэтому размер изображений не стандартизирован, что делает картинки не очень завершенными при просмотре по телефону [это не из -за проблемы с написанием кода] !!! Картинки в реальном проекте не добавляются в упаковку кода. Если вам нужно увидеть лучший эффект, рекомендуется, чтобы размер изображения был разработан как: 750*1217. Из -за моего ограниченного времени и энергии картины, которые я написал в демонстрации, не изменили картины один за другим на размеры 750*1217.
Скачать исходный код: http://xiazai.vevb.com/201606/yuanma/turn.js-fanshu(Vevb.com).rar
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.