示例视频
说明：本案例是使用turn.js插件（turn.js基于Jquery，不引入Jquery无法使用）实现翻书效果，turn.js可以Js版本使用也可以Ts版本使用，根据屏幕大小做翻页效果。附件里面有turn.js文件和原仓库文件。
一、H5使用翻书效果（TS）
一）Turn.js是一个内置的jQuery翻页插件
1.在index.ts引入turn.js
const turn = require("./turn.js");
2.创建html
<div id="indexPage" class="panel">
<div class="page-item">
<div class="i_box">
<!-- 封面 -->
<div class="p1">
<div class="position-middle">
<img class="width-img stop_pointer" src="./images/p1.jpg" alt="">
</div>
</div>
<!-- 故事一 -->
<div class="p2">
<div class="position-middle">
<img class="width-img stop_pointer" src="./images/p2.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
3.css
.panel {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
}
.page-item {
width: 100%;
height: 100%;
position: relative;
background-color: rgba(0, 0, 0, 1);
display: flex;
justify-content: center;
align-items: center;
}
.position-middle {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 20rem;
}
.p1{}
.p1::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url("../images/p1.jpg") no-repeat;
background-size: cover;
filter: blur(0.23rem);
z-index: -1;
}
4.实例化turn
//需要先显示页面才能实例
$("#indexPage").show();
this.initBook();
firestState: boolean = false;
initBook() {
let _this = this;
//@ts-ignore
$(".i_box").turn({
acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为true
pages: 2, // 最大页数
elevation: 600,
width: $(window).width(),
height: $(window).height(),
display: "single",
// direction: "ltr",
gradients: true, // 是否显示翻页阴影效果
autoCenter: true,
when: {
// 翻页前触发
turning: function (e: any, page: any, view: any) {
//@ts-ignore
},
// 翻页后触发
turned: function (e: any, page: any) {
if (page === 1) {}
},
start: function () {},
end: function () {},
},
});
}
5.可用选项、属性、方法、事件、css类
选项：
(1)acceleration:设置硬件加速模式，对于触摸设备，此值必须为真。
acceleration:true;
(2)direction:指定flipbook从左到右(DIR=ltr，默认值)或右向左(DIR=rtl)的方向。
a.$(".i_box").turn({
direction:'rtl'
})
b.<div class="i_box" dir="rtl"></div>
c..i_box{
direction:rtl
}
(3)duration:设置翻页的速度
duration:600 如果设置为0 则不会产生翻页效
(4)gradients：翻页过程中显示渐变和阴影
gradients:true
(5) width:页面的宽度 height:页面的高度
width:num height:num
(6) elevation：转换期间页面的高度
elevation:0
(7) page：初始化时设置页面个数
page:1
(8) pages:设置任意数量的页面。如果页面的数量大于.i_box中元素的数量，使用addPage方法动态地添加这些页面。
$(".i_box").children().length()
(9) when:事件侦听器。键必须在事件列表中使用
$(".i_box").turn({
when:{
turned: function(e, page) {
if(page==1){
}
if(page==2){
}
}
}
})
属性：
(1) animating:当折叠的页面显示时返回true，
function isAnimating() {
if ($(".i_box").turn("animating")) {
alert('Animating a page!');
}
}
(2)direction: 返回当前翻页的方向
$(".i_box").turn("direction")
(3)display：获取当前显示的是单页还是双页
$(".i_box").turn("display")
(4)page:获取当前页面为第几页
$(".i_box").turn("page")
(5)pages:获取总共有多少页
$(".i_box").turn("pages")
(6)size：获取flipbook的高宽
$(".i_box").turn("size") 获取出有两个值 size.width 和 size.height
方法:
(1) addpage:将页面添加到flipbook中
例如插入第10页:
element=$("<div />").html("loading");
$(".i_box").turn("addpagge",element,10)
(2) destroy：删除所有页面
$(".i_box").turn("destroy").remove();
(3) direction :设置flipbook 的方向
$(".i_box").turn("direciton","rtl")
(4) display：设置单页还是双页
$(".i_box").turn("display","single")
(5) next 把视图转到下一个
$(".i_box").turn("next")
$(".i_box").turn("next").turn("next")
(6) options:更改选项的值
$(".i_box").turn("options",{display:"single",duration:})
(7) page：跳到指定的页面
$(".i_box").turn("page",10)
(8) previous:转到前面的视图
$(".i_box").turn("previous")
(9) removepage：删除指定的页面
$(".i_box").turn("removepage"，10)
(10) resize:重新计算页面的大小
$(".i_box").turn("resize")
(11) stop:停止当前的过渡
$(".i_box").turn("page",10).turn("stop")
(12)version:获取当前发布的版本
$(".i_box").turn("version")
(13)zoom:flipbook的缩放比例
$(".i_box").turn("zoom",0.5) 例如当值为0.5时 缩小为原来的一半 当值为1时 则不改变大小
事件：
(1) end：事件在页面停止时触发
$(".i_box").bind("end",function(event,pageobject,turned){
alert("turn.end:"+pageobject.page)
})
(2)first：当当前页面为1时触发此事件
$(".i_box").bind("first",function(event){
alert("page1")
})
(3)last：当当前页面为最后一页时触发此事件
$(".i_box").bind("last",function(event){
alert("page_last")
})
(4)missing：当当前范围需要某些页面时 触发此事件
$(".i_box").bind("missing",function(event,pages){
for(var i=0;i<pages.length;i++){
$(this).turn("addpage",$("<div/>"),pages[i])
}
})
(10) addpage：将页面插入到flipbook
element=$("<div/>").html("loading...")
$("#flipbook").turn("addpage",element,10) 插入第10页
(11) start：页面启动时触发
$(".i_box").bind("start",function(event,pageobject,corner){
if(corner=="tl"||corner=="tr"){
event.preventDefault();
}
})
当翻动左角和右角时，禁止启动动画
(12)turning：翻页之前被启动
$(".i_box").bind("turning",function(event,page,view){
alert("turning the page to"+page)
})
翻页之前 弹出即将翻开的是第几页
(13)turned：翻页完成之后启动
$(".i_box").bind("turned",function(event,page,view){
alert("page"+page)
})
(14)zooming:当缩放改变时触发此事件
