本文实例为大家分享了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 = "";
var imgUrl = resUrl + page;
//var imgUrl = resUrl + (pageNum) + ".png";
if (pageNum == 1) {
tagHtml += "<div id='first'><img src='"+imgUrl+"' /></div>";
} else if (pageNum == length) {
tagHtml += "<div id='first'><img src='"+imgUrl+"' /></div>";
} else {
tagHtml += "<div><img src='"+imgUrl+"' /></div>";
}
$(".flipbook").append(tagHtml);
var w = $(".graph").width();
$(".flipbook-viewport").show();
});
//配置turn.js
function loadApp() {
var w = width;
var h = 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) {
var total = $(".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) {
var total = $(".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 (var i = 0; i < pages.length; i++) {
addPage(pages[i], $(this),bookId);
}
}
}
})
var cpage = getQueryString("pageNum");
$(".flipbook").turn('page', cpage);
}
yepnope({
test: Modernizr.csstransforms,
yep: [jsUrl+'js/turn.js'],
complete: loadApp
});
}
}
}
function getNowFormatDate() {
var date = new Date();
var seperator1 = "";
var seperator2 = "";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
+ "" + date.getHours() + seperator2 + date.getMinutes()
+ seperator2 + date.getSeconds();
return currentdate;
}
//异步加载
function addPage(page, book,bookId) {
//var resUrl = ctxStatic+"/modules/intelligentquery/img/3/";
var resUrl = website + "/lawcase/bookScreenshot?bookId=" + bookId + "&page=";
var imgUrl = resUrl + (page);
var tagHtml = "";
if (page == 1) {
tagHtml += "<div id='first'><img src='"+imgUrl+"' /></div>";
} else if (page == length) {
tagHtml += "<div id='end'><img src='"+imgUrl+"' /></div>";
} else {
tagHtml += "<div><img src='"+imgUrl+"' /></div>";
}
// Check if the page is not in the book
if (!book.turn('hasPage', page)) {
// Create an element for this page
var element = $('<div />').html('');
// Add the page
book.turn('addPage', element, page);
element.html(tagHtml);
}
}
2、阅读页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="front" value="${frontPath}${pageContext.request.contextPath}/f"/>
<c:set var="ctxStatic" value="${pageContext.request.contextPath}/static"/>
<c:set var="website" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-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>阅读</title>
<script src="${ctxStatic}/plugins/jquery-3.2.1.min.js"></script>
<script src="${ctxStatic}/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="${ctxStatic}/modules/front/guide/vertical/common/js/common.js"></script>
<script type="text/javascript" src="${ctxStatic}/modules/front/guide/vertical/js/modernizr.2.5.3.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/modules/front/guide/vertical/js/main.js"></script>
<script src="${ctxStatic}/modules/front/guide/vertical/common/js/flexible.js"></script>
<link href="${ctxStatic}/modules/front/guide/vertical/css/app-base.css" rel="external nofollow" rel="stylesheet">
<style type="text/css">
.flipbook img{
width:10rem;
height:15.2rem;
}
.book-wrapper{
background-image: url('');
}
</style>
</head>
<body>
<div class="flex-container">
<header class="banner2">
<h1>阅读</h1>
</header>
<div class="page-content judicial-wrapper book-wrapper">
<!-- 书本区域 -->
<div class="flipbook-viewport book-box boox-details" style="display:none;">
<div class="previousPage"></div>
<div class="nextPage"></div>
<div class="return"></div>
<div class="container">
<div class="flipbook">
</div>
</div>
</div>
</div>
<!-- 悬浮菜单 -->
<nav class="menu-right">
<div class="paging-box">
<ul>
<li>
<a href="javascript:;" id="goBack" class="i-orange"> <i class="icon-undo2"></i></a>
</li>
<li>
<a href="javascript:;" id="prev" class="prev-page" οnclick="prev()"> <i class="icon-arrow-up2"></i></a>
</li>
<li class="paging-item">
<p id="pageNum"><span id="currentPage">0</span><span id="pageCount">/0</span></p>
</li>
<li>
<a href="javascript:;" id="next" class="next-page" οnclick="next()"> <i class="icon-arrow-down2"></i></a>
</li>
<li>
<div class="skip-page">
<span>跳至</span>
<input id="skip-page-num" type="text" name="skip-toPage">
<div id="softkey"></div>
<span>页</span>
</div>
</li>
<li>
<a href="${front}/guide/vertical/index" class="color-home"> <i class="icon-homepage_fill"></i></a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
<script>
var ctxStatic = "${ctxStatic}";
var website = "${website}";
//上一页
function prev(){
var currentPage = $(".flipbook").turn("page");
$(".flipbook").turn('page', currentPage - 1);
}
// 下一页
function next() {
var currentPage = $(".flipbook").turn("page");
$(".flipbook").turn('page', currentPage + 1);
}
var temp_couter = 0;
// 模拟数字键盘
var softkey = document.getElementById("softkey");
var input1 = document.getElementById("skip-page-num");
$('#skip-page-num').focus(function(){
new KeyBoard(input1,softkey);
});
//跳页
function _global_keyboard_close_btn_callback(value){
var pageNum = parseInt(value);
var total = parseInt(getQueryString("pageCount"));
if(pageNum <= 1){
pageNum = 1;
}else if(pageNum >= total){
pageNum = total;
}
$("#skip-page-num").val(pageNum);
$(".flipbook").turn('page', pageNum);
}
</script>
<script src="${ctxStatic}/modules/front/guide/vertical/common/virtualkeyboard/keyboard.js"></script>