首页
所有分类
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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
使用jquery animate创建平滑滚动效果（可以是到顶部、到底部或指定地方）
May 27 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
Aug 17 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
json数据格式常见操作示例
Jun 13 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
详解Node.js如何处理ES6模块
May 15 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
R72E(1) DE1102(1) React(6) R71E(1) i7 6700(1) ICOM(2) WR-800F(1) GTX1660(1) 对讲机(1) 胆机(1)
You might like
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
Python 迭代器工具包【推荐】
2016/05/06 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
python正则中最短匹配实现代码
2018/01/16 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
Python常用断言函数实例汇总
2020/11/30 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
REISS英国官网：伦敦High Street最受欢迎品牌
2016/12/21 全球购物
工伤赔偿协议书范本
2014/04/15 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
2015年加油站工作总结
2015/05/13 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
使用Django框架创建项目
2022/06/10 Python