turn.js异步加载实现翻书效果异步加载实现翻书效果
主要为大家详细介绍了turn.js异步加载实现翻书效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了turn.js异步加载实现翻书效果的具体代码,供大家参考,具体内容如下
1、阅读翻书js
/**
* 电子翻书
*/
//var width = 1080;
//var height = 1680;
var width = "10rem";
var height = "15.2rem";
window.onload = function () {
//预加载
//loading(18,1);
initData();
}
function getQueryString(name) {
var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
if (result == null || result.length < 1) {
return "";
}
return result[1];
}
function initData(){
var book = getQueryString("bookId");
var count = getQueryString("pageCount");
loading_img_url = new Array();
for (var i = 0; i < count; i++) {
loading_img_url.push((i+1) + ".png");
}
var page = getQueryString("pageNum");
if(!page){
page =1;
}
loading(book,count,page);
}
var date_start;
var date_end;
date_start = getNowFormatDate();
//加载图片
var loading_img_url = [];
//加载页面
function loading(book,count,page) {
var numbers = 0;
var length = loading_img_url.length;
//var resUrl = ctxStatic+"/modules/intelligentquery/img/3/";
var resUrl = website + "/lawcase/bookScreenshot?bookId=" + book + "&page=";
var jsUrl = ctxStatic+"/modules/front/guide/vertical/";
var bookId = book;
var img = new Image();
img.src = resUrl + page;
//img.src = resUrl + pageNum + ".png";
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)) {
//$('.number').hide();
date_end = getNowFormatDate();
var loading_time = date_end - date_start;
//预加载图片
$(function progressbar() {
//拼接图片
$('.shade').hide();
var tagHtml = "";