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

<div class="m-art-cont">
                    <script type="text/javascript" src="/Runtime/js/news_960.js" charset="utf-8"></script>						
            <p>本文实例为大家分享了turn.js异步加载实现翻书效果的具体代码，供大家参考，具体内容如下</p>
<p>1、阅读翻书js</p>

<pre class="brush:js; layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol" style="margin-left: 1px;"><li>/**</li><li> * 电子翻书</li><li> */</li><li>//var width = 1080;</li><li>//var height = 1680;</li><li> </li><li>var width = "10rem";</li><li>var height = "15.2rem";</li><li> </li><li>window.onload = function () {</li><li> </li><li> //预加载</li><li> //loading(18,1);</li><li> initData();</li><li>}</li><li> </li><li>function getQueryString(name) {</li><li> var result = window.location.search.match(new RegExp("[\?\&amp;]" + name + "=([^\&amp;]+)", "i"));</li><li> if (result == null || result.length &lt; 1) {</li><li>  return "";</li><li> }</li><li> return result[1];</li><li>}</li><li> </li><li>function initData(){</li><li> var book = getQueryString("bookId");</li><li> var count = getQueryString("pageCount");</li><li> loading_img_url = new Array();</li><li> for (var i = 0; i &lt; count; i++) {</li><li> loading_img_url.push((i+1) + ".png");</li><li> }</li><li> var page = getQueryString("pageNum");</li><li> if(!page){</li><li> page =1;</li><li> }</li><li> loading(book,count,page);</li><li>}</li><li> </li><li>var date_start;</li><li>var date_end;</li><li>date_start = getNowFormatDate();</li><li>//加载图片</li><li>var loading_img_url = [];</li><li> </li><li>//加载页面</li><li>function loading(book,count,page) {</li><li> var numbers = 0;</li><li> var length = loading_img_url.length;</li><li> //var resUrl = ctxStatic+"/modules/intelligentquery/img/3/";</li><li> var resUrl = website + "/lawcase/bookScreenshot?bookId=" + book + "&amp;page=";</li><li> var jsUrl = ctxStatic+"/modules/front/guide/vertical/";</li><li> var bookId = book;</li><li>  var img = new Image();</li><li>  img.src = resUrl + page;</li><li>  //img.src = resUrl + pageNum + ".png";</li><li>  img.onerror = function () {</li><li>   numbers += (1 / length) * 100;</li><li>  }</li><li>  img.onload = function () {</li><li>   numbers += (1 / length) * 100;</li><li>   $('.number').html(parseInt(numbers) + "%");</li><li>   console.log(numbers);</li><li>   if (Math.round(numbers)) {</li><li>    //$('.number').hide();</li><li>    date_end = getNowFormatDate();</li><li>    var loading_time = date_end - date_start;</li><li>    //预加载图片</li><li>    $(function progressbar() {</li><li>     //拼接图片</li><li>     $('.shade').hide();</li><li>     var tagHtml = "";</li><li>     var imgUrl = resUrl + page;</li><li>     //var imgUrl = resUrl + (pageNum) + ".png";</li><li>     if (pageNum == 1) {</li><li>      tagHtml += "&lt;div id='first'&gt;&lt;img src='"+imgUrl+"' /&gt;&lt;/div&gt;";</li><li>     } else if (pageNum == length) {</li><li>      tagHtml += "&lt;div id='first'&gt;&lt;img src='"+imgUrl+"' /&gt;&lt;/div&gt;";</li><li>     } else {</li><li>      tagHtml += "&lt;div&gt;&lt;img src='"+imgUrl+"' /&gt;&lt;/div&gt;";</li><li>     }</li><li>     $(".flipbook").append(tagHtml);</li><li>     var w = $(".graph").width();</li><li>     $(".flipbook-viewport").show();</li><li>    });</li><li> </li><li> </li><li>    //配置turn.js</li><li>    function loadApp() {</li><li>     var w = width;</li><li>     var h = height;</li><li>     $('.flipboox').width(w).height(h);</li><li>     $('.flipbook').turn({</li><li>      width: w,</li><li>      height: h,</li><li>      elevation: 50,</li><li>      pages: count,</li><li>      display: 'single',</li><li>      gradients: true,</li><li>      autoCenter: true,</li><li>      when: {</li><li>       turning: function (e, page, view) {</li><li>        var total = $(".flipbook").turn("pages");//总页数</li><li>        $("#currentPage").html(page);</li><li>        $("#pageCount").html("/"+total);</li><li>        if (page == 1) {</li><li>         $(".btnImg").css("display", "none");</li><li>         $(".mark").css("display", "block");</li><li>        } else {</li><li>         $(".btnImg").css("display", "block");</li><li>         $(".mark").css("display", "none");</li><li>        }</li><li>        if (page == length) {</li><li>         $(".nextPage").css("display", "none");</li><li>        } else {</li><li>         $(".nextPage").css("display", "block");</li><li>        }</li><li>       },</li><li>       turned: function (e, page, view) {</li><li>        var total = $(".flipbook").turn("pages");//总页数</li><li>        $("#currentPage").html(page);</li><li>        $("#pageCount").html("/"+total);</li><li>        // 判断翻页按钮点击事件以及状态样式</li><li>        if(page &gt;= total){</li><li>         $("#next").addClass("btn-invalid").removeAttr('onclick');</li><li>        }else{</li><li>         $("#next").removeClass("btn-invalid").attr("onclick","next();");</li><li>        }</li><li>        if(page == 1){</li><li>         $("#prev").addClass("btn-invalid").removeAttr('onclick');</li><li>         $("#indexPage").css("display","none");</li><li>        }else{</li><li>         $("#prev").removeClass("btn-invalid").attr("onclick","prev();");</li><li>         $("#indexPage").css("display","flex");</li><li>        }</li><li>       },</li><li>       missing: function (e, pages) {</li><li>        for (var i = 0; i &lt; pages.length; i++) {</li><li>         addPage(pages[i], $(this),bookId);</li><li>        }</li><li>       }</li><li> </li><li> </li><li>      }</li><li>     })</li><li>  var cpage = getQueryString("pageNum");</li><li>  $(".flipbook").turn('page', cpage);</li><li>    }</li><li>    yepnope({</li><li>     test: Modernizr.csstransforms,</li><li>     yep: [jsUrl+'js/turn.js'],</li><li>     complete: loadApp</li><li>    });</li><li>   }</li><li>  }</li><li>}</li><li> </li><li>function getNowFormatDate() {</li><li> var date = new Date();</li><li> var seperator1 = "";</li><li> var seperator2 = "";</li><li> var month = date.getMonth() + 1;</li><li> var strDate = date.getDate();</li><li> if (month &gt;= 1 &amp;&amp; month &lt;= 9) {</li><li>  month = "0" + month;</li><li> }</li><li> if (strDate &gt;= 0 &amp;&amp; strDate &lt;= 9) {</li><li>  strDate = "0" + strDate;</li><li> }</li><li> var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate</li><li>  + "" + date.getHours() + seperator2 + date.getMinutes()</li><li>  + seperator2 + date.getSeconds();</li><li> return currentdate;</li><li>}</li><li> </li><li>//异步加载</li><li>function addPage(page, book,bookId) {</li><li> //var resUrl = ctxStatic+"/modules/intelligentquery/img/3/";</li><li> var resUrl = website + "/lawcase/bookScreenshot?bookId=" + bookId + "&amp;page=";</li><li> var imgUrl = resUrl + (page);</li><li> var tagHtml = "";</li><li> if (page == 1) {</li><li>  tagHtml += "&lt;div id='first'&gt;&lt;img src='"+imgUrl+"' /&gt;&lt;/div&gt;";</li><li> } else if (page == length) {</li><li>  tagHtml += "&lt;div id='end'&gt;&lt;img src='"+imgUrl+"' /&gt;&lt;/div&gt;";</li><li> } else {</li><li>  tagHtml += "&lt;div&gt;&lt;img src='"+imgUrl+"' /&gt;&lt;/div&gt;";</li><li> }</li><li> </li><li> // Check if the page is not in the book</li><li> if (!book.turn('hasPage', page)) {</li><li>  // Create an element for this page</li><li>  var element = $('&lt;div /&gt;').html('');</li><li>  // Add the page</li><li>  book.turn('addPage', element, page);</li><li>  element.html(tagHtml);</li><li> }</li><li>}</li></ol></pre>

<p>2、阅读页面</p>

<pre class="brush:xhtml; layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol" style="margin-left: 1px;"><li>&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;</li><li>&lt;%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %&gt;</li><li>&lt;c:set var="front" value="${frontPath}${pageContext.request.contextPath}/f"/&gt;</li><li>&lt;c:set var="ctxStatic" value="${pageContext.request.contextPath}/static"/&gt;</li><li>&lt;c:set var="website" value="${pageContext.request.contextPath}"/&gt;</li><li>&lt;!DOCTYPE html&gt;</li><li>&lt;html&gt;</li><li>&lt;head&gt;</li><li> &lt;meta charset="utf-8"&gt;</li><li> &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/&gt;</li><li> &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"&gt;</li><li> &lt;meta name="format-detection" content="telephone=no"&gt;</li><li> &lt;meta name="apple-mobile-web-app-capable" content="yes"/&gt;</li><li> &lt;meta name="apple-mobile-web-app-status-bar-style" content="black"/&gt;</li><li> &lt;title&gt;阅读&lt;/title&gt;</li><li> &lt;script src="${ctxStatic}/plugins/jquery-3.2.1.min.js"&gt;&lt;/script&gt;</li><li> &lt;script src="${ctxStatic}/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"&gt;&lt;/script&gt;</li><li> &lt;script src="${ctxStatic}/modules/front/guide/vertical/common/js/common.js"&gt;&lt;/script&gt;</li><li> &lt;script type="text/javascript" src="${ctxStatic}/modules/front/guide/vertical/js/modernizr.2.5.3.min.js"&gt;&lt;/script&gt;</li><li> </li><li> &lt;script type="text/javascript" src="${ctxStatic}/modules/front/guide/vertical/js/main.js"&gt;&lt;/script&gt;</li><li> &lt;script src="${ctxStatic}/modules/front/guide/vertical/common/js/flexible.js"&gt;&lt;/script&gt;</li><li> </li><li> </li><li> &lt;link href="${ctxStatic}/modules/front/guide/vertical/css/app-base.css" rel="external nofollow" rel="stylesheet"&gt;</li><li> &lt;style type="text/css"&gt;</li><li> .flipbook img{</li><li> width:10rem;</li><li> height:15.2rem;</li><li> }</li><li> .book-wrapper{</li><li> background-image: url(''); </li><li> }</li><li> &lt;/style&gt;</li><li> </li><li>&lt;/head&gt;</li><li>&lt;body&gt;</li><li> &lt;div class="flex-container"&gt;</li><li>  &lt;header class="banner2"&gt;</li><li>   &lt;h1&gt;阅读&lt;/h1&gt;</li><li>  &lt;/header&gt;</li><li>  &lt;div class="page-content judicial-wrapper book-wrapper"&gt;</li><li>   &lt;!-- 书本区域 --&gt;</li><li>   &lt;div class="flipbook-viewport book-box boox-details" style="display:none;"&gt;</li><li>    &lt;div class="previousPage"&gt;&lt;/div&gt;</li><li>    &lt;div class="nextPage"&gt;&lt;/div&gt;</li><li>    &lt;div class="return"&gt;&lt;/div&gt;</li><li>    &lt;div class="container"&gt;</li><li>     &lt;div class="flipbook"&gt;</li><li>     &lt;/div&gt;</li><li>    &lt;/div&gt;</li><li>   &lt;/div&gt;</li><li>  &lt;/div&gt;</li><li>  &lt;!-- 悬浮菜单 --&gt;</li><li>  &lt;nav class="menu-right"&gt;</li><li>   &lt;div class="paging-box"&gt;</li><li>    &lt;ul&gt;</li><li>     &lt;li&gt;</li><li>      &lt;a href="javascript:;" id="goBack" class="i-orange"&gt; &lt;i class="icon-undo2"&gt;&lt;/i&gt;&lt;/a&gt;</li><li>     &lt;/li&gt;</li><li>     &lt;li&gt;</li><li>      &lt;a href="javascript:;" id="prev" class="prev-page" οnclick="prev()"&gt; &lt;i class="icon-arrow-up2"&gt;&lt;/i&gt;&lt;/a&gt;</li><li>     &lt;/li&gt;</li><li>     &lt;li class="paging-item"&gt;</li><li>      &lt;p id="pageNum"&gt;&lt;span id="currentPage"&gt;0&lt;/span&gt;&lt;span id="pageCount"&gt;/0&lt;/span&gt;&lt;/p&gt;</li><li>     &lt;/li&gt;</li><li>     &lt;li&gt;</li><li>      &lt;a href="javascript:;" id="next" class="next-page" οnclick="next()"&gt; &lt;i class="icon-arrow-down2"&gt;&lt;/i&gt;&lt;/a&gt;</li><li>     &lt;/li&gt;</li><li>     &lt;li&gt;</li><li>      &lt;div class="skip-page"&gt;</li><li>       &lt;span&gt;跳至&lt;/span&gt;</li><li>       &lt;input id="skip-page-num" type="text" name="skip-toPage"&gt;</li><li>       &lt;div id="softkey"&gt;&lt;/div&gt;</li><li>       &lt;span&gt;页&lt;/span&gt;</li><li>      &lt;/div&gt;</li><li>     &lt;/li&gt;</li><li>     &lt;li&gt;</li><li>      &lt;a href="${front}/guide/vertical/index" class="color-home"&gt; &lt;i class="icon-homepage_fill"&gt;&lt;/i&gt;&lt;/a&gt;</li><li>     &lt;/li&gt;</li><li>    &lt;/ul&gt;</li><li>   &lt;/div&gt;</li><li>  &lt;/nav&gt;</li><li> &lt;/div&gt;</li><li>&lt;/body&gt;</li><li>&lt;/html&gt;</li><li> </li><li>&lt;script&gt;</li><li> </li><li> var ctxStatic = "${ctxStatic}";</li><li> var website = "${website}";</li><li> </li><li> //上一页</li><li> function prev(){</li><li>  var currentPage = $(".flipbook").turn("page");</li><li>  $(".flipbook").turn('page', currentPage - 1);</li><li> }</li><li> // 下一页</li><li> function next() {</li><li>  var currentPage = $(".flipbook").turn("page");</li><li>  $(".flipbook").turn('page', currentPage + 1);</li><li> }</li><li> </li><li> var temp_couter = 0;</li><li> // 模拟数字键盘</li><li> var softkey = document.getElementById("softkey");</li><li> var input1 = document.getElementById("skip-page-num");</li><li> $('#skip-page-num').focus(function(){</li><li>  new KeyBoard(input1,softkey);</li><li> });</li><li> </li><li> //跳页</li><li> function _global_keyboard_close_btn_callback(value){</li><li>  var pageNum = parseInt(value);</li><li>  var total = parseInt(getQueryString("pageCount"));</li><li>  if(pageNum &lt;= 1){</li><li>   pageNum = 1;</li><li>  }else if(pageNum &gt;= total){</li><li>   pageNum = total;</li><li>  }</li><li> </li><li>  $("#skip-page-num").val(pageNum);</li><li>  $(".flipbook").turn('page', pageNum);</li><li> }</li><li> </li><li>&lt;/script&gt;</li><li>&lt;script src="${ctxStatic}/modules/front/guide/vertical/common/virtualkeyboard/keyboard.js"&gt;&lt;/script&gt;</li></ol></pre>

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