最近CTO给我分配了一个移动端H5开发的任务，主要功能是需要实现翻书效果，我听过主要需求后，当时是呀！！！接下来自己尝试使用fullPage.js和Swiper来实现翻书效果，结果效果都不是非常的理想，后来想起自己曾经做过PC版的翻书效果，当时使用的是Turn.js ，查过其相关API后，整个人突然豁然开朗呀，使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀。现在将个人的学习总结如下，若有不正确的地方，欢迎读者给与批评指正！

Turn.js的官方网址: http://www.turnjs.com/

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

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

  1、需要引入的脚本文件      

 <link rel="stylesheet" type="text/css" href="css/basic.css"/>

 <script type="text/javascript" src="js/jquery.js"></script>

 <script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>

 <script type="text/javascript" src="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 name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

     <meta name="format-detection" content="telephone=no">

     <meta name="apple-mobile-web-app-capable" content="yes"/>

     <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

     <title>Turn.js 实现翻书效果</title>

     <link rel="stylesheet" type="text/css" href="css/basic.css"/>

     <script type="text/javascript" src="js/jquery.js"></script>

     <script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>

     <script type="text/javascript" src="js/main.js"></script>

 </head>

 <body>

 <div class="shade">

     <div class="sk-fading-circle">

         <div class="sk-circle1 sk-circle"></div>

         <div class="sk-circle2 sk-circle"></div>

         <div class="sk-circle3 sk-circle"></div>

         <div class="sk-circle4 sk-circle"></div>

         <div class="sk-circle5 sk-circle"></div>

         <div class="sk-circle6 sk-circle"></div>

         <div class="sk-circle7 sk-circle"></div>

         <div class="sk-circle8 sk-circle"></div>

         <div class="sk-circle9 sk-circle"></div>

         <div class="sk-circle10 sk-circle"></div>

         <div class="sk-circle11 sk-circle"></div>

         <div class="sk-circle12 sk-circle"></div>

     </div>

     <div class="number"></div>

 </div>

 <div class="flipbook-viewport" style="display:none;">

     <div class="previousPage"></div>

     <div class="nextPage"></div>

     <div class="return"></div>

     <img class="btnImg" src="./image/btn.gif" style="display: none"/>

     <div class="container">

         <div class="flipbook">

         </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 class="g-plugin-confirm">');

             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实现部分

 /**

  * Created by ChengYa on 2016/6/18.

  */

 //判断手机类型

 window.onload = function () {

     //alert($(window).height());

     var u = navigator.userAgent;

     if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机

     } else if (u.indexOf('iPhone') > -1) {//苹果手机

         //屏蔽ios下上下弹性

         $(window).on('scroll.elasticity', function (e) {

             e.preventDefault();

         }).on('touchmove.elasticity', function (e) {

             e.preventDefault();

         });

     } else if (u.indexOf('Windows Phone') > -1) {//winphone手机

     }

     //预加载

     loading();

 }

 var date_start;

 var date_end;

 date_start = getNowFormatDate();

 //加载图片

 var loading_img_url = [

     "./image/0001.jpg",

     "./image/0002.jpg",

     "./image/0003.jpg",

     "./image/0004.jpg",

     "./image/0005.jpg",

     "./image/0006.jpg",

     "./image/0007.jpg",

     "./image/0008.jpg",

     "./image/0009.jpg",

     "./image/0010.jpg",

     "./image/0011.jpg",

     "./image/0012.jpg",

     "./image/0013.jpg",

     "./image/0014.jpg",

     "./image/0015.jpg",

     "./image/0016.jpg",

     "./image/0017.jpg",

     "./image/0018.jpg",

     "./image/0019.jpg",

     "./image/0020.jpg",

     "./image/0021.jpg",

     "./image/0022.jpg",

     "./image/0023.jpg",

     "./image/0024.jpg",

     "./image/0025.jpg",

     "./image/0026.jpg",

     "./image/0027.jpg",

     "./image/0028.jpg",

     "./image/0029.jpg",

     "./image/0030.jpg",

     "./image/0031.jpg",

     "./image/0032.jpg",

     "./image/0033.jpg",

     "./image/0034.jpg",

     "./image/0035.jpg",

     "./image/0036.jpg",

     "./image/0037.jpg",

     "./image/0038.jpg",

     "./image/0039.jpg",

     "./image/0040.jpg",

     "./image/0041.jpg",

 ];

 //加载页面

 function loading() {

     var numbers = 0;

     var length = loading_img_url.length;

     for (var i = 0; i < length; i++) {

         var img = new Image();

         img.src = loading_img_url[i];

         img.onerror = function () {

             numbers += (1 / length) * 100;

         }

         img.onload = function () {

             numbers += (1 / length) * 100;

             $('.number').html(parseInt(numbers) + "%");

             console.log(numbers);

             if (Math.round(numbers) == 100) {

                 //$('.number').hide();

                 date_end = getNowFormatDate();

                 var loading_time = date_end - date_start;

                 //预加载图片

                 $(function progressbar() {

                     //拼接图片

                     $('.shade').hide();

                     var tagHtml = "";

                     for (var i = 1; i <= 41; i++) {

                         if (i == 1) {

                             tagHtml += ' <div id="first" style="background:url(image/00' + (i < 10 ? '0' + i : i) + '.jpg) center top no-repeat;background-size:100%"></div>';

                         } else if (i == 41) {

                             tagHtml += ' <div id="end" style="background:url(image/00' + (i < 10 ? '0' + i : i) + '.jpg) center top no-repeat;background-size:100%"></div>';

                         } else {

                             tagHtml += ' <div style="background:url(image/00' + (i < 10 ? '0' + i : i) + '.jpg) center top no-repeat;background-size:100%"></div>';

                         }

                     }

                     $(".flipbook").append(tagHtml);

                     var w = $(".graph").width();

                     $(".flipbook-viewport").show();

                 });

                 //配置turn.js

                 function loadApp() {

                     var w = $(window).width();

                     var h = $(window).height();

                     $('.flipboox').width(w).height(h);

                     $(window).resize(function () {

                         w = $(window).width();

                         h = $(window).height();

                         $('.flipboox').width(w).height(h);

                     });

                     $('.flipbook').turn({

                         // Width

                         width: w,

                         // Height

                         height: h,

                         // Elevation

                         elevation: 50,

                         display: 'single',

                         // Enable gradients

                         gradients: true,

                         // Auto center this flipbook

                         autoCenter: true,

                         when: {

                             turning: function (e, page, view) {

                                 if (page == 1) {

                                     $(".btnImg").css("display", "none");

                                     $(".mark").css("display", "block");

                                 } else {

                                     $(".btnImg").css("display", "block");

                                     $(".mark").css("display", "none");

                                 }

                                 if (page == 41) {

                                     $(".nextPage").css("display", "none");

                                 } else {

                                     $(".nextPage").css("display", "block");

                                 }

                             },

                             turned: function (e, page, view) {

                                 console.log(page);

                                 var total = $(".flipbook").turn("pages");//总页数

                                 if (page == 1) {

                                     $(".return").css("display", "none");

                                     $(".btnImg").css("display", "none");

                                 } else {

                                     $(".return").css("display", "block");

                                     $(".btnImg").css("display", "block");

                                 }

                                 if (page == 2) {

                                     $(".catalog").css("display", "block");

                                 } else {

                                     $(".catalog").css("display", "none");

                                 }

                             }

                         }

                     })

                 }

                 yepnope({

                     test: Modernizr.csstransforms,

                     yep: ['js/turn.js'],

                     complete: loadApp

                 });

             }

             ;

         }

     }

 }

 function getNowFormatDate() {

     var date = new Date();

     var seperator1 = "";

     var seperator2 = "";

     var month = date.getMonth() + 1;

     var strDate = date.getDate();

     if (month >= 1 && month <= 9) {

         month = "0" + month;

     }

     if (strDate >= 0 && strDate <= 9) {

         strDate = "0" + strDate;

     }

     var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate

         + "" + date.getHours() + seperator2 + date.getMinutes()

         + seperator2 + date.getSeconds();

     return currentdate;

 }

   4、最终实现结果

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

       5、代码打包 下载

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

最新文章

  1. Excel通过身份证获取出生年月，性别，年龄，生肖，星座，省份等信息总结归纳
  2. xcode6.0以上创建一个Empty Application
  3. SQL总结（七）查询实战
  4. 用SQL语句添加删除修改字段
  5. 获取一个字符串中每一个字母出现的次数使用map集合
  6. hey
  7. VSTO 为Office已有右键菜单添加自己的菜单项（word,Excel）
  8. 2015年15+最佳的响应式HTML5网站模板
  9. [Swift]LeetCode255.验证二叉搜索树的先序序列 $ Verify Preorder Sequence in Binary Search Tree
  10. 分布式系统消息中间件——RabbitMQ的使用思考篇
  11. HTML5拖放牛刀小试
  12. 如何查找CpG Islands, CpG shores等 --转载
  13. [蓝桥杯]ALGO-51.算法训练_Torry的困惑(基本型)
  14. 对象序列化与反序列化（二进制 byte[]）
  15. Converting REF CURSOR to PIPE for Performance in PHP OCI8 and PDO_OCI
  16. UVM环境(一)
  17. php中的declare
  18. Atcoder Tenka1 Programmer Contest 2019题解
  19. Python、Lua和Ruby比较——脚本语言大P.K.
  20. HTTPS的页面发送不了HTTP请求？——关于混合内容

热门文章

  1. solr查询字段为空值,删除字段空值的方法
  2. solr--搜索参数随笔
  3. Callable--创建有返回值的线程
  4. 原来腾讯还出过一个开源项目libco
  5. [Android]Handler的消息机制
  6. JAVA数字证书制作生成
  7. MJ刷新控件MJRefreshFooterView上拉之后收不回来的解决办法
  8. AspNetPager学习使用2
  9. Sharepoint 2013 安装部署系列篇 第二篇 -- SQL集群安装
  10. Sass和Compass设计师指南