基于Turn.js实现翻书效果实例解析
最近项⽬经理我个项⽬练练⼿，其项⽬需求是要实现翻书效果，看到这个需求后，我真是懵了，这咋整，我可是java出⾝的啊，这个问题真是难住我了，后来有同事的指导，之前他曾经做过PC版的翻书效果，当时使⽤的是Turn.js ，查过其相关API 后，整个⼈突然豁然开朗呀，使⽤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 chart="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome="/>
<meta name="viewport" content="width=device-width, initial-scale=., ur-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" >
<div class="previousPage"></div>
<div class="nextPage"></div>
<div class="return"></div>
<img class="btnImg" src="./image/btn.gif" />
<div class="container">
<div class="flipbook">
</div>
</div>
</div>
<script>
//⾃定义仿iphone弹出层
(function ($) {
//ios confirm box
firm = 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 dom = $('<div>').appendTo(dom);
var dom_content = $('<div>').html(o.title).appendTo(dom);
var dom_btn = $('<div>').appendTo(dom);
var btn_cancel = $('<a href="#"></a>').html(o.cancelText).appendTo(dom_btn);
var btn_ok = $('<a href="#"></a>').html(o.okText).appendTo(dom_btn);
('click', function (e) {
o.cancelCall();
e.preventDefault();
});
('click', function (e) {
o.okCall();
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);
} el {
}
});
/
/ 下⼀页
$(".nextPage").bind("touchend", function () {
var pageCount = $(".flipbook").turn("pages");//总页数
var currentPage = $(".flipbook").turn("page");//当前页
if (currentPage <= pageCount) {
$(".flipbook").turn('page', currentPage + 1);
} el {
}幸存者效应
});
//返回到⽬录页
$(".return").bind("touchend", function () {
$(document).confirm('您确定要返回⾸页吗?', {}, function () {
带的网名$(".flipbook").turn('page', ); //跳转页数
}, function () {
});
});
</script>
描写人的好词好句</body>
</html>
3、主要js实现部分
//判断⼿机类型
/
/alert($(window).height());
var u = navigator.urAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓⼿机} el if (u.indexOf('iPhone') > -1) {//苹果⼿机
//屏蔽ios下上下弹性
$(window).on('scroll.elasticity', function (e) {
e.preventDefault();
}).on('touchmove.elasticity', function (e) {
e.preventDefault();
});
} el 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];
numbers += (1 / length) * 100;
}
numbers += (1 / length) * 100;
$('.number').html(parInt(numbers) + "%");
console.log(numbers);
if (und(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" ></div>'; } el if (i == 41) {
tagHtml += ' <div id="end" ></div>'; } el {
tagHtml += ' <div ></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: ,
display: 'single',
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true,
when: {
turning: function (e, page, view) {
if (page == ) {
$(".btnImg").css("display", "none");
$(".mark").css("display", "block");
} el {
$(".btnImg").css("display", "block");
$(".mark").css("display", "none");
}
if (page == 41) {
时间都去哪了$(".nextPage").css("display", "none");
} el {
$(".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");
} el {
$(".return").css("display", "block");
$(".btnImg").css("display", "block");
}
if (page == 2) {
$(".catalog").css("display", "block");
} el {
$(".catalog").css("display", "none");
}
}
}
})
}
yepnope({
test: Modernizr.csstransforms,
yep: ['js/turn.js'],
complete: loadApp
});
}
;
}
}
}
function getNowFormatDate() {
var date = new Date();
var perator1 = "";
var perator2 = "";
var month = Month() + ;
var strDate = Date();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = FullYear() + perator + month + perator + strDate
+ "" + Hours() + perator2 + Minutes()
+ perator2 + Seconds();
return currentdate;
}
4、最终实现结果
友情提醒⼤家需要注意事项：图⽚是从⽹上随便下载的，所以图⽚的尺⼨不规范，导致在⼿机上浏览时图⽚不是很完整【不是因为代码写的有问题哦】代码打包中没有加⼊真实项⽬中的图⽚，如需看到最佳的效果，建议图⽚尺⼨设计为:750*1217，由于个⼈的时间和精⼒有限，我写的这个Demo使⽤的图⽚就没有将图⽚⼀⼀修改为750*1217的尺⼨。
5、代码打包下载
