Recently, the CTO assigned me a task for mobile H5 development. The main function is to achieve book-turning effects. After I heard of the main needs, it was true at that time! ! ! Next, I tried to use fullPage.js and Swiper to achieve the book-turning effect, but the results were not very ideal. Later, I remembered that I had done the PC version of the book-turning effect. At that time, I used Turn.js. After checking its related API, I suddenly realized that using Turn.js can completely solve all my current needs for taking over this project. Now I will summarize my personal learning as follows. If there is any incorrectness, readers are welcome to criticize and correct me!
Turn.js' official website: http://www.turnjs.com/
Here are the results of my project after it is launched:
After seeing the actual project, are you impatient to know how this project is implemented? Don’t worry, let me introduce my development process in detail:
1. Script files that need to be introduced
<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.2.5.3.min.js"></script><script type="text/javascript" src="js/main.js"></script>
2. Part of html code
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <meta name="format-detection" content="telephone=no"> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <title>Turn.js achieves book-turning effect</title> <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.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> <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><script> //Custom imitation iphone pop-up layer(function ($) { //ios confirm box jQuery.fn.confirm = function (title, option, okCall, cancelCall) { var defaults = { title: null, //what text cancelText: 'Cancel', //the cancel btn text okText: 'Confirm' //the ok btn text }; if (undefined === option) { option = {}; } if ('function' != typeof okCall) { okCall = $.noop; } if ('function' != typeof cancelCall) { cancelCall = $.noop; } var o = $.extend(defaults, option, {title: title, okCall: okCall, cancelCall: cancelCall}); var $dom = $(this); var dom = $('<div>'); var dom1 = $('<div>').appendTo(dom); var dom_content = $('<div>').html(o.title).appendTo(dom1); var dom_btn = $('<div>').appendTo(dom1); var btn_cancel = $('<a href="#"></a>').html(o.cancelText).appendTo(dom_btn); var btn_ok = $('<a href="#"></a>').html(o.okText).appendTo(dom_btn); btn_cancel.on('click', function (e) { o.cancelCall(); dom.remove(); e.preventDefault(); }); btn_ok.on('click', function (e) { o.okCall(); dom.remove(); e.preventDefault(); }); dom.appendTo($('body')); return $dom; }; })(jQuery); //Previous page$(".previousPage").bind("touchend", function () { var pageCount = $(".flipbook").turn("pages"); //Total number of pages var currentPage = $(".flipbook").turn("page"); //Current page if (currentPage >= 2) { $(".flipbook").turn('page', currentPage - 1); } else { } }); //NextPage").bind("touchend", function () { var pageCount = $(".flipbook").turn("pages");//Total number of pages var currentPage = $(".flipbook").turn("page");//Current page if (currentPage <= pageCount) { $(".flipbook").turn('page', currentPage + 1); } else { } }); //Return to directory page $(".return").bind("touchend", function () { $(document).confirm('Are you sure you want to return to the homepage?', {}, function () { $(".flipbook").turn('page', 1); //Number of pages jump}, function () { }); });</script></body></html>3. Main js implementation parts
/** * Created by ChengYa on 2016/6/18. *///Judge mobile phone type window.onload = function () { //alert($(window).height()); var u = navigator.userAgent; if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//Android phone} else if (u.indexOf('iPhone') > -1) {//Apple phone//Shield the upper and lower elasticity of ios.on('scroll.elasticity', function (e) { e.preventDefault(); }).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();//Loading image var loading_img_url = [ "./image/0001.jpg", "./image/0002.jpg", "./image/0003.jpg", "./image/0004.jpg", "./image/0005.jpg", "./image/0006.jpg", "./image/0007.jpg", "./image/0008.jpg", "./image/0009.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/0019.jpg", "./image/0020.jpg", "./image/0021.jpg", "./image/0022.jpg", "./image/0023.jpg", "./image/0024.jpg", "./image/0025.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/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",];//Loading page function loading() { 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 / length) * 100; } img.onload = function () { numbers += (1 / length) * 100; $('.number').html(parseInt(numbers) + "%"); console.log(numbers); if (Math.round(numbers) == 100) { //$('.number').hide(); date_end = getNowFormatDate(); var loading_time = date_end - date_start; //Preload image $(function progressbar() { //Split image $('.shade').hide(); var tagHtml = ""; for (var i = 1; i <= 41; i++) { if (i == 1) { tagHtml += ' <div id="first" style="background:url(image/00' + (i < 10 ? '0' + i : i) + '.jpg) center top no-repeat;background-size:100%"></div>'; } else if (i == 41) { tagHtml += ' <div id="end" style="background:url(image/00' + (i < 10 ? '0' + i : i) + '.jpg) center top no-repeat;background-size:100%"></div>'; } else { tagHtml += ' <div style="background:url(image/00' + (i < 10 ? '0' + i : i) + '.jpg) center top no-repeat;background-size:100%"></div>'; } } $(".flipbook").append(tagHtml); var w = $(".graph").width(); $(".flipbook-viewport").show(); }); //Configure turn.js function loadApp() { var w = $(window).width(); var h = $(window).height(); $('.flipbook').width(w).height(h); $(window).resize(function () { w = $(window).width(); h = $(window).height(); $('.flipbook').turn({ // Width width: w, // Height height: h, // Elevation elevation: 50, display: 'single', // Enable gradients gradients: true, // Auto center this flipbook autoCenter: true, when: { turning: function (e, page, view) { if (page == 1) { $(".btnImg").css("display", "none"); $(".mark").css("display", "block"); } else { $(".btnImg").css("display", "block"); $(".mark").css("display", "none"); } if (page == 41) { $(".nextPage").css("display", "none"); } else { $(".nextPage").css("display", "block"); } }, turned: function (e, page, view) { console.log(page); var total = $(".flipbook").turn("pages");//Total number of pages if (page == 1) { $(".return").css("display", "none"); $(".btnImg").css("display", "none"); } else { $(".return").css("display", "block"); $(".btnImg").css("display", "block"); } if (page == 2) { $(".catalog").css("display", "block"); } else { $(".catalog").css("display", "none"); } } } }) } yepnope({ test: Modernizr.csstransforms, yep: ['js/turn.js'], complete: loadApp }); } ; } }}function getNowFormatDate() { var date = new Date(); var seperator1 = ""; var seperator2 = ""; var month = date.getMonth() + 1; var strDate = date.getDate(); if (month >= 1 && month <= 9) { month = "0" + month; } if (strDate >= 0 && strDate <= 9) { strDate = "0" + strDate; } var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + "" + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds(); return currentdate;}4. Final result
Note: The pictures are downloaded casually from the Internet, so the size of the pictures is not standardized, which makes the pictures not very complete when browsing on the phone [it is not because of the problem with the code writing] !!! The pictures in the real project are not added to the code packaging. If you need to see the best effect, it is recommended that the size of the picture is designed as: 750*1217. Due to my limited time and energy, the pictures I wrote in the demo did not change the pictures one by one to the size of 750*1217.
Source code download: http://xiazai.VeVB.COM/201606/yuanma/Turn.js-fanshu(VeVB.COM).rar
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.