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 = "";
     var imgUrl = resUrl + page;
     //var imgUrl = resUrl + (pageNum) + ".png";
     if (pageNum == 1) {
      tagHtml += "";
     } else if (pageNum == length) {
      tagHtml += "";
     } else {
      tagHtml += "";
     }
     $(".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 += "";
 } else if (page == length) {
  tagHtml += "";
 } else {
  tagHtml += "";
 }
 
 // Check if the page is not in the book
 if (!book.turn('hasPage', page)) {
  // Create an element for this page
  var element = $('').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" %>






 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 .flipbook img{
 width:10rem;
 height:15.2rem;
 }
 .book-wrapper{
 background-image: url(''); 
 }
 
 


 
  

   阅读
  
  
   
   
    
    
    
    
     
     
    
   
  
  
  
 


 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。