本文實例為大家分享了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); }}