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 += \"<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>

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