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 相关文章推荐
JS中的异常处理方法分享
Dec 22 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 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自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
JavaScript 基础问答三
2008/12/03 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
express.js中间件说明详解
2019/03/19 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
django-rest-swagger对API接口注释的方法
2019/08/29 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
新闻专业学生的自我评价
2014/02/13 职场文书
大学生求职信
2014/06/17 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
个人廉政承诺书
2015/04/28 职场文书
怎样写家长意见
2015/06/04 职场文书
反邪教观后感
2015/06/11 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python