turn.js异步加载实现翻书效果
本文实例为大家分享了turn.js异步加载实现翻书效果的具体代码，供大家参考，具体内容如下
1、阅读翻书js
/**
*电子翻书
*/
//varwidth=1080;
//varheight=1680;
varwidth="10rem";
varheight="15.2rem";
window.onload=function(){
//预加载
//loading(18,1);
initData();
}
functiongetQueryString(name){
varresult=window.location.search.match(newRegExp("[\?\&]"+name+"=([^\&]+)","i"));
if(result==null||result.length<1){
return"";
}
returnresult[1];
}
functioninitData(){
varbook=getQueryString("bookId");
varcount=getQueryString("pageCount");
loading_img_url=newArray();
for(vari=0;i ";
}elseif(pageNum==length){
tagHtml+="
";
}else{
tagHtml+="
";
}
$(".flipbook").append(tagHtml);
varw=$(".graph").width();
$(".flipbook-viewport").show();
});
//配置turn.js
functionloadApp(){
varw=width;
varh=height;
$('.flipboox').width(w).height(h);
$('.flipbook').turn({
width:w,
height:h,
elevation:50,
pages:count,
display:'single',
gradients:true,
autoCenter:true,
when:{
turning:function(e,page,view){
vartotal=$(".flipbook").turn("pages");//总页数
$("#currentPage").html(page);
$("#pageCount").html("/"+total);
if(page==1){
$(".btnImg").css("display","none");
$(".mark").css("display","block");
}else{
$(".btnImg").css("display","block");
$(".mark").css("display","none");
}
if(page==length){
$(".nextPage").css("display","none");
}else{
$(".nextPage").css("display","block");
}
},
turned:function(e,page,view){
vartotal=$(".flipbook").turn("pages");//总页数
$("#currentPage").html(page);
$("#pageCount").html("/"+total);
//判断翻页按钮点击事件以及状态样式
if(page>=total){
$("#next").addClass("btn-invalid").removeAttr('onclick');
}else{
$("#next").removeClass("btn-invalid").attr("onclick","next();");
}
if(page==1){
$("#prev").addClass("btn-invalid").removeAttr('onclick');
$("#indexPage").css("display","none");
}else{
$("#prev").removeClass("btn-invalid").attr("onclick","prev();");
$("#indexPage").css("display","flex");
}
},
missing:function(e,pages){
for(vari=0;i
=1&&month<=9){
month="0"+month;
}
if(strDate>=0&&strDate<=9){
strDate="0"+strDate;
}
varcurrentdate=date.getFullYear()+seperator1+month+seperator1+strDate
+""+date.getHours()+seperator2+date.getMinutes()
+seperator2+date.getSeconds();
returncurrentdate;
}
//异步加载
functionaddPage(page,book,bookId){
//varresUrl=ctxStatic+"/modules/intelligentquery/img/3/";
varresUrl=website+"/lawcase/bookScreenshot?bookId="+bookId+"&page=";
varimgUrl=resUrl+(page);
vartagHtml="";
if(page==1){
tagHtml+=" 