Use Turn. js to parse book turning results and use turn. js to book turning

Use Turn. js to parse book turning results and use turn. js to book turning

Recently, I am a project trainer from the project manager. The project requirement is to achieve the effect of turning books. After seeing this requirement, I am really sorry. I am a java programmer, this problem is really difficult for me. Later, I was guided by my colleagues. He had previously done a PC version of the book-turning effect. At that time, he used the Turn. js. After checking its related APIs, the whole person suddenly becomes very open and uses Turn. js can completely solve all the requirements I have taken over this project. The following small series will share my learning experience with you.

Turn. js Official Website: http://www.turnjs.com/

The following figure shows the effect of my project launch:

After reading the actual project, you can't wait to know how the project is implemented, but you can't wait. Next I will introduce the development process in detail:

1. script file 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. Some html code

<! DOCTYPE html> 
3. Main js implementations

// Determine the 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 mobile phone // shield the upper and lower elasticity of ios $ (window ). on ('scroll. elasticity ', function (e) {e. preventDefault ();}). on ('touchmove. elasticity ', function (e) {e. preventDefault () ;});} else if (u. indexOf ('windows Phone ')>-1) {// winphon E mobile phone} // pre-load loading ();} var date_start; var date_end; date_start = getNowFormatDate (); // load the 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 ",". /ima Ge/0016.jpg ",". /image/0017.jpg ",". /image/0018.jpg ",". /image/0019.jpg ",". /image/00w.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/0034.jpg ",". /image/0035.jpg ",". /image/0036.jpg ",". /imag E/0037.jpg ",". /image/0038.jpg ",". /image/0039.jpg ",". /image/0040.jpg ",". /image/0041.jpg",]; // load the 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) * 100100000000('.number'0000.html (parseInt (number S) + "%"); console. log (numbers); if (Math. round (numbers) = 100) {// $ ('. number '). hide (); date_end = getNowFormatDate (); var loading_time = date_end-date_start; // pre-loaded image $ (function progressbar () {// splice 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 the 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 "detail .css (" display "," block ");} else {$ (". btnImg ").css (" display "," block "); $ (". mark "detail .css (" display "," none ");} if (page = 41) {$ (". nextPage "detail .css (" display "," none ");} else {$ (". nextPage "detail .css (" display "," block ") ;}, turned: function (e, page, view) {console. log (page); var total = $ (". flipbook "). turn ("pages"); // the total number of pages if (page = 1) {$ (". return "cmd.css (" display "," none "); $ (". btnImg ").css (" display "," none ");} else {$ (". return "cmd.css (" display "," block "); $ (". btnImg ").css (" display "," block ");} if (page = 2) {$ (". catalog ").css (" display "," block ");} else {$ (". catalog ").css (" display "," none ") ;}}})} yepnope ({test: Modernizr.css transforms, 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 implementation result

Friendly reminder of the customer's house:Images are randomly downloaded from the internet, so the image size is not standard, resulting in incomplete pictures when browsing on the mobile phone [not because of code writing problems ]!!! No images from real projects are added to the code package. For the best results, we recommend that you design the image size to 750*1217. Due to your limited time and energy, the image I used in this Demo didn't change one by one to 750*1217.

5. code package and download

Http://xiazai.jb51.net/201605/yuanma/Turn.js (jb51.net).rar)