最近CTO给我分配了一个移动端H5开发的任务，主要功能是需要实现翻书效果，我听过主要需求后，当时是
呀！！！接下来自己尝试使用 fullPage.js和Swiper来实现翻书效果，结果效果都不是非常的理想，后来想起自己曾经做过PC版的翻书效果，当时使用的是Turn.js ，查过其相关API后，整个人突然豁然开朗呀，使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀。现在将个人的学习总结如下，若有不正确的地方，欢迎读者给与批评指正！
Turn.js的官方网址: http://www.turnjs.com/
下面是我这个项目上线后的效果：
看过实际项目后，各位看官是不是已经迫不及待的想知道这个项目是如何实现，看官莫急，接下来我就详细的介绍下我的开发过程：
1、需要引入的脚本文件
1 <link rel="stylesheet" type="text/css" href="css/basic.css"/>
2 <script type="text/javascript" src="js/jquery.js"></script>
3 <script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>
4 <script type="text/javascript" src="js/main.js"></script>
** 2、html部分代码**
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
7 <meta name="format-detection" content="telephone=no">
8 <meta name="apple-mobile-web-app-capable" content="yes"/>
9 <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
10 <title>Turn.js 实现翻书效果</title>
11 <link rel="stylesheet" type="text/css" href="css/basic.css"/>
12 <script type="text/javascript" src="js/jquery.js"></script>
13 <script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>
14 <script type="text/javascript" src="js/main.js"></script>
15 </head>
16 <body>
17 <div class="shade">
18 <div class="sk-fading-circle">
19 <div class="sk-circle1 sk-circle"></div>
20 <div class="sk-circle2 sk-circle"></div>
21 <div class="sk-circle3 sk-circle"></div>
22 <div class="sk-circle4 sk-circle"></div>
23 <div class="sk-circle5 sk-circle"></div>
24 <div class="sk-circle6 sk-circle"></div>
25 <div class="sk-circle7 sk-circle"></div>
26 <div class="sk-circle8 sk-circle"></div>
27 <div class="sk-circle9 sk-circle"></div>
28 <div class="sk-circle10 sk-circle"></div>
29 <div class="sk-circle11 sk-circle"></div>
30 <div class="sk-circle12 sk-circle"></div>
31 </div>
32 <div class="number"></div>
33 </div>
34 <div class="flipbook-viewport" style="display:none;">
35 <div class="previousPage"></div>
36 <div class="nextPage"></div>
37 <div class="return"></div>
38 <img class="btnImg" src="./image/btn.gif" style="display: none"/>
39 <div class="container">
40 <div class="flipbook">
41 </div>
42 </div>
43 </div>
44 <script>
45 //自定义仿iphone弹出层
46 (function ($) {
47 //ios confirm box
48 jQuery.fn.confirm = function (title, option, okCall, cancelCall) {
49 var defaults = {
50 title: null, //what text
51 cancelText: '取消', //the cancel btn text
52 okText: '确定' //the ok btn text
53 };
54
55 if (undefined === option) {
56 option = {};
57 }
58 if ('function' != typeof okCall) {
59 okCall = $.noop;
60 }
61 if ('function' != typeof cancelCall) {
62 cancelCall = $.noop;
63 }
64
65 var o = $.extend(defaults, option, {title: title, okCall: okCall, cancelCall: cancelCall});
66
67 var $dom = $(this);
68
69 var dom = $('<div class="g-plugin-confirm">');
70 var dom1 = $('<div>').appendTo(dom);
71 var dom_content = $('<div>').html(o.title).appendTo(dom1);
72 var dom_btn = $('<div>').appendTo(dom1);
73 var btn_cancel = $('<a href="#"></a>').html(o.cancelText).appendTo(dom_btn);
74 var btn_ok = $('<a href="#"></a>').html(o.okText).appendTo(dom_btn);
75 btn_cancel.on('click', function (e) {
76 o.cancelCall();
77 dom.remove();
78 e.preventDefault();
79 });
80 btn_ok.on('click', function (e) {
81 o.okCall();
82 dom.remove();
83 e.preventDefault();
84 });
85
86 dom.appendTo($('body'));
87 return $dom;
88 };
89 })(jQuery);
90
91 //上一页
92 $(".previousPage").bind("touchend", function () {
93 var pageCount = $(".flipbook").turn("pages");//总页数
94 var currentPage = $(".flipbook").turn("page");//当前页
95 if (currentPage >= 2) {
96 $(".flipbook").turn('page', currentPage - 1);
97 } else {
98 }
99 });
100 // 下一页
101 $(".nextPage").bind("touchend", function () {
102 var pageCount = $(".flipbook").turn("pages");//总页数
103 var currentPage = $(".flipbook").turn("page");//当前页
104 if (currentPage <= pageCount) {
105 $(".flipbook").turn('page', currentPage + 1);
106 } else {
107 }
108 });
109 //返回到目录页
110 $(".return").bind("touchend", function () {
111 $(document).confirm('您确定要返回首页吗?', {}, function () {
112 $(".flipbook").turn('page', 1); //跳转页数
113 }, function () {
114 });
115 });
116 </script>
117 </body>
118 </html>
View Code
** 3、主要js实现部分**
1 /**
2 * Created by ChengYa on 2016/6/18.
3 */
4
5 //判断手机类型
6 window.onload = function () {
7 //alert($(window).height());
8 var u = navigator.userAgent;
9 if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
10 } else if (u.indexOf('iPhone') > -1) {//苹果手机
11 //屏蔽ios下上下弹性
12 $(window).on('scroll.elasticity', function (e) {
13 e.preventDefault();
14 }).on('touchmove.elasticity', function (e) {
15 e.preventDefault();
16 });
17 } else if (u.indexOf('Windows Phone') > -1) {//winphone手机
18 }
19 //预加载
20 loading();
21 }
22
23 var date_start;
24 var date_end;
25 date_start = getNowFormatDate();
26 //加载图片
27 var 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 ];
70
71 //加载页面
72 function loading() {
73 var numbers = 0;
74 var length = loading_img_url.length;
75
76 for (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) {
87 //$('.number').hide();
88 date_end = getNowFormatDate();
89 var loading_time = date_end - date_start;
90 //预加载图片
91 $(function progressbar() {
92 //拼接图片
93 $('.shade').hide();
94 var tagHtml = "";
95 for (var i = 1; i <= 41; i++) {
96 if (i == 1) {
97 tagHtml += ' <div id="first" style="background:url(image/00' + (i < 10 ? '0' + i : i) + '.jpg) center top no-repeat;background-size:100%"></div>';
98 } else if (i == 41) {
99 tagHtml += ' <div id="end" style="background:url(image/00' + (i < 10 ? '0' + i : i) + '.jpg) center top no-repeat;background-size:100%"></div>';
100 } else {
101 tagHtml += ' <div style="background:url(image/00' + (i < 10 ? '0' + i : i) + '.jpg) center top no-repeat;background-size:100%"></div>';
102 }
103 }
104 $(".flipbook").append(tagHtml);
105 var w = $(".graph").width();
106 $(".flipbook-viewport").show();
107 });
108 //配置turn.js
109 function 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({
119 // Width
120 width: w,
121 // Height
122 height: h,
123 // Elevation
124 elevation: 50,
125 display: 'single',
126 // Enable gradients
127 gradients: true,
128 // Auto center this flipbook
129 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);
147 var total = $(".flipbook").turn("pages");//总页数
148 if (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 }
174
175 function 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 }
View Code
** 4、最终实现结果**
注：图片是从网上随便下载的，所以图片的尺寸不规范，导致在手机上浏览时图片不是很完整【不是因为代码写的有问题哦】 !!! 代码打包中没有加入真实项目中的图片，如需看到最佳的效果，建议图片尺寸设计为:750*1217，由于个人的时间和精力有限，我写的这个Demo使用的图片就没有将图片一一修改为750*1217的尺寸。
5、代码打包 下载
链接: http://pan.baidu.com/s/1o7T1qjw 密码: chpx
