首先,实现翻书效果我使用了turnjs,是一款非常好用的翻书效果插件。可以直接在百度搜索turnjis下载。也可已选择在我的github库下载。
其次,PC端和移动端屏幕的差异使得我们需要控制在PC端显示两页,在移动端显示一页,然后宽度和高度用js做适应即可。
turnjs使用头部需要引入的文件。然后固定格式的代码
<link rel="stylesheet" href="css/common.css">
<script src="js/jquery.min.1.7.js"></script>
<link rel="stylesheet" href="js/turnjs/css/basic.css">
<div class="flipbook-viewport">
<div class="container">
<div class="flipbook">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
然后,js初始化就ok了。初始化的时候判断当前是否为移动端,然后执行不同的初始化。
<script type="text/javascript" src="js/turnjs/extras/modernizr.2.5.3.min.js"></script>
<script type="text/javascript" src="js/turnjs/lib/turn.min.js"></script>
<script>
$(function(){
//可以设置上一页 及 下一页 跳转指定页
// Turn to the page 10
//$("#flipbook").turn("page", 10);
//$("#flipbook").turn("next");
//$("#flipbook").turn("prev");
function loadApp() {
var w = $(window).width() - 40;
var h = $(window).height() - 160;
//判断是否是移动端
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
//书本初始化
$('.flipbook').turn({
width:w,
height:h,//书本的大小
direction:"ltr",//书本翻动方向
elevation: 50, //在转换期间设置页面的标高。
display:"single",//display("double" "single") 展示一页或者两页,默认double
duration:1000,// 设置翻页动画持续时间即翻页的快慢,默认600(毫秒)
gradients: true,//翻页阴影
acceleration:true,// 硬件加速,对于触摸设备,一定要设置true
autoCenter:false //是否居中 默认false
});
} else {
//书本初始化
$('.flipbook').turn({
width:w,
height:h,
direction:"ltr",
elevation: 50,
display:"double",
duration:1000,
gradients: true
});
var $pages = $(".page");
if($pages.length>0){
for(var i=0;i<$pages.length;i++){
$pages.eq(i).css("width",w/2);
}
}
}
}
yepnope({
test : Modernizr.csstransforms,
// nope: ['js/turnjs/lib/turn.html4.min.js'],
complete: loadApp
});
})
</script>