Turn.js 实现翻书效果的学习与总结
Posted 抖音的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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以上是关于Turn.js 实现翻书效果的学习与总结的主要内容，如果未能解决你的问题，请参考以下文章