首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

移动端H5开发 Turn.js实现很棒的翻书效果

Posted in Javascript onJune 20, 2016

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

移动端H5开发 Turn.js实现很棒的翻书效果

 看过实际项目后，各位看官是不是已经迫不及待的想知道这个项目是如何实现，看官莫急，接下来我就详细的介绍下我的开发过程：
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、最终实现结果

移动端H5开发 Turn.js实现很棒的翻书效果

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

源码下载：http://xiazai.3water.com/201606/yuanma/Turn.js-fanshu(3water.com).rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

移动端H5开发 Turn.js实现很棒的翻书效果

- Author -

陈亚

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JAVASCRIPT 对象的创建与使用
Mar 09 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
node使用promise替代回调函数
May 07 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 #Javascript
jQuery插件 Jqplot图表实例
Jun 18 #Javascript
jqPlot jQuery绘图插件的使用
Jun 18 #Javascript
jQuery获取radio选中项的值实例
Jun 18 #Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 #Javascript
jQuery解决$符号命名冲突
Jun 18 #Javascript
prototype.js常用函数详解
Jun 18 #Javascript
S-2000(1) Spring(9) PostMapping(1) 微信(2) Lifecycle(1) ResNet50(1) 温控(1) 内存泄露(1) 小喇叭(1) 小喇叭开始广播了(1)
You might like
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
再谈JavaScript线程
2015/07/10 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
Bootstrap组件系列之福利篇几款好用的组件（推荐二）
2016/07/12 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
Python 除法小技巧
2008/09/06 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
Chain Reaction Cycles俄罗斯：世界上最大的在线自行车商店
2019/08/27 全球购物
linux面试题参考答案（1）
2016/01/22 面试题
ktv总经理岗位职责
2014/02/17 职场文书
高中军训感想800字
2014/02/23 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
高一新生军训方案
2014/05/12 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
法定代表人资格证明书
2015/06/18 职场文书
干部考核工作总结2015
2015/07/24 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python