首页
所有分类
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聚焦于第一个字段的代码
Oct 15 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
js 调用百度分享功能
Feb 27 Javascript
js实现放大镜特效
May 18 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
JavaScript Tab菜单实现过程解析
May 13 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
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
匈牙利购物网站(11) 巴基斯坦购物网站(2) 捷克购物网站(26) 新西兰购物网站(42) 菲律宾购物网站(13) 智利购物网站(5) 越南购物网站(9) 秘鲁购物网站(1) 卡塔尔购物网站(3) 北美洲购物网站(1)
You might like
使用Apache的rewrite技术
2006/06/22 PHP
php下过滤HTML代码的函数
2007/12/10 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
python中as用法实例分析
2015/04/30 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
会计自我鉴定范文
2013/10/06 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
服务整改报告
2014/11/06 职场文书
现实表现材料范文
2014/12/23 职场文书
给下属加薪申请报告
2015/05/15 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
关于社会实践的心得体会（2016最新版）
2016/01/25 职场文书
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js