最近CTO给我分配了一个移动端H5开发的任务，主要功能是需要实现翻书效果，我听过主要需求后，当时是呀！！！接下来自己尝试使用 fullPage.js和Swiper来实现翻书效果，结果效果都不是非常的理想，后来想起自己曾经做过PC版的翻书效果，当时使用的是，查过其相关API后，整个人突然豁然开朗呀，使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀。现在将个人的学习总结如下，若有不正确的地方，欢迎读者给与批评指正！ Turn.js的官方网址: 下面是我这个项目上线后的效果：
看过实际项目后，各位看官是不是已经迫不及待的想知道这个项目是如何实现，看官莫急，接下来我就详细的介绍下我的开发过程：
1、需要引入的脚本文件
2、html部分代码
3、主要js实现部分
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%">
} 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%">
} else {
tagHtml += ' <div style="background:url(image/00' + (i < 10 ? '0' + i : i) + '.jpg) center top no-repeat;background-size:100%">
}
}
$(".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,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的尺寸。
