turn.js 非同步載入實現翻書效果
阿新 • • 發佈：2018-12-19
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="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" onclick="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" onclick="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>