首页
所有分类
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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
jQuery实现中奖播报功能（让文本滚动起来） 简单设置数值即可
Mar 20 jQuery
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
variable_scope(1) 神经网络(7) data(4) blinker(1) character(1) 三子棋(2) name_scope (1) Keras(3) 信号库(1) 字符集(1)
You might like
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
Jquery 基础学习笔记
2009/05/29 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python 数据加密代码
2008/12/24 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
德国化妆品和天然化妆品网上商店：kosmetikfuchs.de
2017/06/09 全球购物
英国领先的独立酒精饮料零售商：DrinkSupermarket
2021/01/13 全球购物
三八妇女节标语
2014/10/09 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
教师年度考核个人总结
2015/02/12 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书