Mobile End H5 Development Turn.js to achieve a great turn-book effect _javascript skills

CTO recently assigned me a mobile End H5 development task, the main function is to achieve the effect of the book, I heard the main requirements, then yes!!! The next attempt to use Fullpage.js and swiper to achieve the effect of the book, the results are not very ideal, and then think of their own had done a PC version of the book effect, at that time the use of the Turn.js, checked its relevant API, the whole people suddenly enlightened ah, Using turn.js can completely solve all the requirements of my current project. Now the individual learning summarized as follows, if there is not the right place, welcome readers to criticize and correct!
Turn.js's official website: http://www.turnjs.com/
Here is the effect of my project after the launch:

After watching the actual project, you reader is not eager to know how this project is to achieve, reader, next I will elaborate on my development process:
1, need to introduce the script file

<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, HTML part of the code

<! DOCTYPE html>  

3, Main JS implementation section

/** * Created by Chengya on 2016/6/18.
 *//Judge Mobile 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
 Shield iOS up and down elasticity $ (window). On (' Scroll.elasticity ', function (e) {e.preventdefault ();
 }). On (' Touchmove.elasticity ', function (e) {e.preventdefault ();
 });
else if (U.indexof (' Windows Phone ') >-1) {//winphone mobile phone}//preload loading ();
} var Date_start;
var date_end;
Date_start = Getnowformatdate (); Load picture var loading_img_url = ["./image/0001.jpg", "./image/0002.jpg", "./image/0003.jpg", "./image/0004.jpg", "./ima Ge/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/0020.jpg ","./image/0021.jpg ","./image/0022.jpg ","./image/0023.jpg ","./image/0024.jpg ","./image/0 025.jpg ","./image/0026.jpg ","./image/0027.jpg ","./image/0028.jpg ","./image/0029.jpg ","./image/0030.jpg ","./ima Ge/0031.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 ",];
 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) = =) {//$ ('. Number '). Hide ();
  Date_end = Getnowformatdate ();
  var loading_time = Date_end-date_start; Pre-loaded picture $ (fUnction ProgressBar () {//Mosaic picture $ ('. Shade '). Hide ();
   var taghtml = ""; for (var i = 1; I <= i++) {if (i = = 1) {taghtml + = ' <div id= ' "A" style= "Background:url" (image/00 ' + (I < 10?)
   ' 0 ' + i:i) + '. jpg ' Center top no-repeat;background-size:100% ' ></div> '; else if (i = =) {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 ();
   $ ('. Flipboox '). Width (w). Height (h);
   $ (window). Resize (function () {w = $ (window). width ();
   h = $ (window). Height (); $('. Flipboox '). Width (w). Height (h);
   }); $ ('. FlipBook '). Turn ({//Width width:w,//Height height:h,//elevation elevation:50, display: ' s Ingle ',//Enable gradients Gradients:true,//Auto Center This FlipBook autocenter:true, when: {tur
     Ning: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 = = = $ (". NextPage"). CSS ("display", "none");
    } else {$ (". NextPage"). CSS ("Display", "block");
    }, Turned:function (E, page, view) {Console.log (page);
     var total = $ (". FlipBook"). Turn ("pages");//Gross page 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, the final implementation of the results

Note: pictures are downloaded from the Internet, so the size of the picture is not standardized, resulting in the mobile phone browsing when the picture is not very complete "is not because of the code write a problem oh" !!! Code packaging does not add a real project in the picture, if you want to see the best results, the proposed picture size design: 750*1217, due to personal time and Energy Limited, I wrote this demo use of the picture will not be one by one modified to 750*1217 size.

SOURCE Download: Http://xiazai.jb51.net/201606/yuanma/Turn.js-fanshu (jb51.net). rar

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.