最近CTO给我分配了一个移动端H5开发的任务，主要功能是需要实现翻书效果，我听过主要需求后，当时是

     Turn.js的官方网址: 

     下面是我这个项目上线后的效果：

      看过实际项目后，各位看官是不是已经迫不及待的想知道这个项目是如何实现，看官莫急，接下来我就详细的介绍下我的开发过程：

      1、需要引入的脚本文件      

     2、html部分代码

Turn.js 实现翻书效果 ($) { (title, option, okCall, cancelCall) { { }; option) { {}; 57 } okCall) { $.noop; 60 } cancelCall) { $.noop; 63 } $.extend(defaults, option, {title: title, okCall: okCall, cancelCall: cancelCall}); ); ); ).appendTo(dom); ).html(o.title).appendTo(dom1); ).appendTo(dom1); ).html(o.cancelText).appendTo(dom_btn); ).html(o.okText).appendTo(dom_btn); (e) { 76 o.cancelCall(); 77 dom.remove(); 78 e.preventDefault(); 79 }); (e) { 81 o.okCall(); 82 dom.remove(); 83 e.preventDefault(); 84 }); )); 87 return $dom; 88 }; 89 })(jQuery); () { ) { ); { 98 } 99 }); () { pageCount) { ); { 107 } 108 }); () { () { () { 114 }); 115 });

     3、主要js实现部分

1 /** 2 * Created by ChengYa on 2016/6/18. window.onload = function () { u = navigator.userAgent; } $(window).on('scroll.elasticity', function (e) { 13 e.preventDefault(); 14 }).on('touchmove.elasticity', function (e) { 15 e.preventDefault(); 16 }); } loading(); 21 } date_start; 24 var date_end; 25 date_start = getNowFormatDate(); loading_img_url = [ 28 "./image/0001.jpg", 29 "./image/0002.jpg", 30 "./image/0003.jpg", 31 "./image/0004.jpg", 32 "./image/0005.jpg", 33 "./image/0006.jpg", 34 "./image/0007.jpg", 35 "./image/0008.jpg", 36 "./image/0009.jpg", 37 "./image/0010.jpg", 38 "./image/0011.jpg", 39 "./image/0012.jpg", 40 "./image/0013.jpg", 41 "./image/0014.jpg", 42 "./image/0015.jpg", 43 "./image/0016.jpg", 44 "./image/0017.jpg", 45 "./image/0018.jpg", 46 "./image/0019.jpg", 47 "./image/0020.jpg", 48 "./image/0021.jpg", 49 "./image/0022.jpg", 50 "./image/0023.jpg", 51 "./image/0024.jpg", 52 "./image/0025.jpg", 53 "./image/0026.jpg", 54 "./image/0027.jpg", 55 "./image/0028.jpg", 56 "./image/0029.jpg", 57 "./image/0030.jpg", 58 "./image/0031.jpg", 59 "./image/0032.jpg", 60 "./image/0033.jpg", 61 "./image/0034.jpg", 62 "./image/0035.jpg", 63 "./image/0036.jpg", 64 "./image/0037.jpg", 65 "./image/0038.jpg", 66 "./image/0039.jpg", 67 "./image/0040.jpg", 68 "./image/0041.jpg", 69 ]; loading() { 73 var numbers = 0; 74 var length = loading_img_url.length; (var i = 0; i < length; i++) { 77 var img = new Image(); 78 img.src = loading_img_url[i]; 79 img.onerror = function () { 80 numbers += (1 / length) * 100; 81 } 82 img.onload = function () { 83 numbers += (1 / length) * 100; 84 $('.number').html(parseInt(numbers) + "%"); 85 console.log(numbers); 86 if (Math.round(numbers) == 100) { date_end = getNowFormatDate(); 89 var loading_time = date_end - date_start; $(function progressbar() { $('.shade').hide(); 94 var tagHtml = ""; 95 for (var i = 1; i <= 41; i++) { 96 if (i == 1) { 97 tagHtml += ' <div></div>'; 98 } else if (i == 41) { 99 tagHtml += ' <div></div>'; 100 } else { 101 tagHtml += ' <div></div>'; 102 } 103 } 104 $(".flipbook").append(tagHtml); 105 var w = $(".graph").width(); 106 $(".flipbook-viewport").show(); 107 }); loadApp() { 110 var w = $(window).width(); 111 var h = $(window).height(); 112 $('.flipboox').width(w).height(h); 113 $(window).resize(function () { 114 w = $(window).width(); 115 h = $(window).height(); 116 $('.flipboox').width(w).height(h); 117 }); 118 $('.flipbook').turn({ width: w, height: h, elevation: 50, 125 display: 'single', gradients: true, autoCenter: true, 130 when: { 131 turning: function (e, page, view) { 132 if (page == 1) { 133 $(".btnImg").css("display", "none"); 134 $(".mark").css("display", "block"); 135 } else { 136 $(".btnImg").css("display", "block"); 137 $(".mark").css("display", "none"); 138 } 139 if (page == 41) { 140 $(".nextPage").css("display", "none"); 141 } else { 142 $(".nextPage").css("display", "block"); 143 } 144 }, 145 turned: function (e, page, view) { 146 console.log(page); (page == 1) { 149 $(".return").css("display", "none"); 150 $(".btnImg").css("display", "none"); 151 } else { 152 $(".return").css("display", "block"); 153 $(".btnImg").css("display", "block"); 154 } 155 if (page == 2) { 156 $(".catalog").css("display", "block"); 157 } else { 158 $(".catalog").css("display", "none"); 159 } 160 } 161 } 162 }) 163 } 164 yepnope({ 165 test: Modernizr.csstransforms, 166 yep: ['js/turn.js'], 167 complete: loadApp 168 }); 169 } 170 ; 171 } 172 } 173 } getNowFormatDate() { 176 var date = new Date(); 177 var seperator1 = ""; 178 var seperator2 = ""; 179 var month = date.getMonth() + 1; 180 var strDate = date.getDate(); 181 if (month >= 1 && month <= 9) { 182 month = "0" + month; 183 } 184 if (strDate >= 0 && strDate <= 9) { 185 strDate = "0" + strDate; 186 } 187 var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate 188 + "" + date.getHours() + seperator2 + date.getMinutes() 189 + seperator2 + date.getSeconds(); 190 return currentdate; 191 }

     4、最终实现结果