Recently, the project manager practiced his project. The project requirements were to achieve the effect of flipping books. After seeing this requirement, I was really confused. What happened? I was born in Java. This problem really stumped me. Later, I had a colleague's guidance. He had done the PC version of flipping books before. He used Turn.js at that time. After checking its related API, he suddenly realized that using Turn.js can completely solve all my current needs for taking over this project. Below, the editor will share my study experience with you, you can refer to it
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="/><meta name="viewport" content="width=device-width, initial-scale=., 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 the effect of flipping books</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><img src="./image/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="./image/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="./image/btn.gif" style="display: none"/><div><div></div></div></div><script>//Custom imitation iphone pop-up layer(function ($) {//ios confirm boxjQuery.fn.confirm = function (title, option, okCall, cancelCall) {var defaults = {title: null, //what textcancelText: 'Cancel', //the cancel btn textokText: '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 dom = $('<div>').appendTo(dom);var dom_content = $('<div>').html(o.title).appendTo(dom);var dom_btn = $('<div>').appendTo(dom);var dom 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 {}});// Next page $(".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', ); //Number of jump pages}, function () {});});</script></body></html>3. Main js implementation parts
//Judge the type of mobile phone 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/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/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",];//load 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.jsfunction loadApp() {var w = $(window).width();var h = $(window).height();$('.flipboox').width(w).height(h);$(window).resize(function() {w = $(window).width();h = $(window).height();$('.flipboox').width(w).height(h);});$('.flipbook').turn({// Widthwidth: w,// Heightheight: h,// Elevationelevation: ,display: 'single',// Enable gradientsgradients: true,// Auto center this flipbookautoCenter: true, when: {turning: function (e, page, view) {if (page == ) {$(".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", "block");} "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() + ;var strDate = date.getDate();if (month >= 1 && month <= 9) {month = "0" + month;}if (strDate >= 0 && strDate <= 9) {strDate = "0" + strDate;}var currentdate = date.getFullYear() + seperator + month + seperator + strDate+ "" + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds();return currentdate;}4. Final result
Wulin netizens remind everyone to pay attention to: the pictures are downloaded casually from the Internet, so the size of the pictures is not standardized, which leads to the pictures not very complete when browsing on your phone [It’s 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 image size design is: 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.
5. Code packaging and download
http://xiazai.VeVB.COM/201605/yuanma/Turn.js to achieve book-turning effect (VeVB.COM).rar