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 相关文章推荐
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
jQuery中调用WebService方法小结
Mar 28 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
对javascript继承的理解
Oct 11 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 Javascript
js实现复制粘贴的两种方法
Dec 04 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函数method_exists()与is_callable()的区别
2013/06/21 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
smarty简单入门实例
2014/11/28 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
Python深入学习之特殊方法与多范式
2014/08/31 Python
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
Django 大文件下载实现过程解析
2019/08/01 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
详解Scrapy Redis入门实战
2020/11/18 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
意大利奢侈品网站:Italist
2016/08/23 全球购物
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
Python中如何定义一个函数
2016/09/06 面试题
环境科学专业个人求职信
2013/12/15 职场文书
民族团结先进个人材料
2014/02/05 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
物业保安辞职信
2015/05/12 职场文书
2016国培学习心得体会
2016/01/08 职场文书
初一语文教学反思
2016/03/03 职场文书
学习心得体会
2019/06/20 职场文书
Linux磁盘管理方法介绍
2022/06/01 Servers