最近CTO给我分配了一个移动端H5开发的任务，主要功能是需要实现翻书效果，我听过主要需求后，当时是呀！！！接下来自己尝试使用 fullPage.js和Swiper来实现翻书效果，结果效果都不是非常的理想，后来想起自己曾经做过PC版的翻书效果，当时使用的是Turn.js ，查过其相关API后，整个人突然豁然开朗呀，使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀。现在将个人的学习总结如下，若有不正确的地方，欢迎读者给与批评指正！
Turn.js的官方网址:
下面是我这个项目上线后的效果：
看过实际项目后，各位看官是不是已经迫不及待的想知道这个项目是如何实现，看官莫急，接下来我就详细的介绍下我的开发过程：
1、需要引入的脚本文件
<link type="text/css" href="https://www.jb51.net/css/basic.css"/> <script type="text/javascript" src="https://www.jb51.net/js/jquery.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/modernizr.2.5.3.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/main.js"></script>
2、html部分代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta content="width=device-width, initial-scale=1.0, user-scalable=no"/> <meta content="telephone=no"> <meta content="yes"/> <meta content="black"/> <title>Turn.js 实现翻书效果</title> <link type="text/css" href="https://www.jb51.net/css/basic.css"/> <script type="text/javascript" src="https://www.jb51.net/js/jquery.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/modernizr.2.5.3.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/main.js"></script> </head> <body> <div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div></div> </div> <div> <div></div> <div></div> <div></div> <img src="https://www.jb51.net/article/image/btn.gif"/> <div> <div> </div> </div> </div> <script> //自定义仿iphone弹出层 (function ($) { //ios confirm box jQuery.fn.confirm = function (title, option, okCall, cancelCall) { var defaults = { title: null, //what text cancelText: '取消', //the cancel btn text okText: '确定' //the ok btn text }; if (undefined === option) { option = {}; } if ('function' != typeof okCall) { okCall = $.noop; } if ('function' != typeof cancelCall) { cancelCall = $.noop; } var o = $.extend(defaults, option, {title: title, okCall: okCall, cancelCall: cancelCall}); var $dom = $(this); var dom = $('<div>'); var dom1 = $('<div>').appendTo(dom); var dom_content = $('<div>').html(o.title).appendTo(dom1); var dom_btn = $('<div>').appendTo(dom1); var btn_cancel = $('<a href="#"></a>').html(o.cancelText).appendTo(dom_btn); var btn_ok = $('<a href="#"></a>').html(o.okText).appendTo(dom_btn); btn_cancel.on('click', function (e) { o.cancelCall(); dom.remove(); e.preventDefault(); }); btn_ok.on('click', function (e) { o.okCall(); dom.remove(); e.preventDefault(); }); dom.appendTo($('body')); return $dom; }; })(jQuery); //上一页 $(".previousPage").bind("touchend", function () { var pageCount = $(".flipbook").turn("pages");//总页数 var currentPage = $(".flipbook").turn("page");//当前页 if (currentPage >= 2) { $(".flipbook").turn('page', currentPage - 1); } else { } }); // 下一页 $(".nextPage").bind("touchend", function () { var pageCount = $(".flipbook").turn("pages");//总页数 var currentPage = $(".flipbook").turn("page");//当前页 if (currentPage <= pageCount) { $(".flipbook").turn('page', currentPage + 1); } else { } }); //返回到目录页 $(".return").bind("touchend", function () { $(document).confirm('您确定要返回首页吗?', {}, function () { $(".flipbook").turn('page', 1); //跳转页数 }, function () { }); }); </script> </body> </html>
3、主要js实现部分