turn.js异步加载实现翻书效果

前端  /  管理员 发布于 4年前   1492

本文实例为大家分享了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" %>                    
  
   
阅读
  
  
      
    
    
    
    
     
                    

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

您可能感兴趣的文章:

• 基于Turn.js 实现翻书效果实例解析
• 移动端H5开发 Turn.js实现很棒的翻书效果