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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="goBack" class="i-orange"> <i class="icon-undo2"></i></a>
          </li>
          <li>
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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" rel="external nofollow" 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>

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