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

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

移动端H5开发 Turn.js实现很棒的翻书效果_第1张图片

 看过实际项目后,各位看官是不是已经迫不及待的想知道这个项目是如何实现,看官莫急,接下来我就详细的介绍下我的开发过程:
1、需要引入的脚本文件     




 

2、html部分代码




 
 
 
 
 
 
 Turn.js 实现翻书效果
 
 
 
 


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 += ' 
'; } else if (i == 41) { tagHtml += '
'; } else { tagHtml += '
'; } } $(".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的尺寸。

源码下载:http://xiazai.jb51.net/201606/yuanma/Turn.js-fanshu(jb51.net).rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(移动端H5开发 Turn.js实现很棒的翻书效果)