Turn.js 实现翻书效果的学习与总结

最近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>

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 }

4、最终实现结果

注：图片是从网上随便下载的，所以图片的尺寸不规范，导致在手机上浏览时图片不是很完整【不是因为代码写的有问题哦】 !!! 代码打包中没有加入真实项目中的图片，如需看到最佳的效果，建议图片尺寸设计为:750*1217，由于个人的时间和精力有限，我写的这个Demo使用的图片就没有将图片一一修改为750*1217的尺寸。

5、代码打包下载

链接: http://pan.baidu.com/s/1o7T1qjw 密码: chpx

posted @ 2019-04-10 15:02 对方屌丝正在输入中阅读(6179) 评论(2) 编辑收藏举报

刷新页面返回顶部

泡泡

Turn.js 实现翻书效果的学习与总结

公告