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


Posted in Javascript onJuly 25, 2019

本文实例为大家分享了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:;" id="goBack" class="i-orange"> <i class="icon-undo2"></i></a>
     </li>
     <li>
      <a href="javascript:;" 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:;" 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" 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅谈javascript的数据类型检测
Jul 10 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
vue双花括号的使用方法 附练习题
Nov 07 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
React 实现拖拽功能的示例代码
Jan 06 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
js 实现ajax发送步骤过程详解
Jul 25 #Javascript
MockJs结合json-server模拟后台数据
Aug 26 #Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 #Javascript
mock.js模拟前后台交互
Jul 25 #Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 #Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 #Javascript
vue使用代理解决请求跨域问题详解
Jul 24 #Javascript
You might like
简单的PHP多图上传小程序代码
2011/07/17 PHP
php笔记之:AOP的应用
2013/04/24 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
JS如何生成动态列表
2020/09/22 Javascript
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
Python 元类实例解析
2018/04/04 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
Python3 集合set入门基础
2020/02/10 Python
Python装饰器用法与知识点小结
2020/03/09 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
python pillow库的基础使用教程
2021/01/13 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
暑期实习鉴定
2013/12/16 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle
SpringBoot详解执行过程
2022/07/15 Java/Android