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 相关文章推荐
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
浅析JavaScript动画
Jun 10 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
浅谈vue加载优化策略
Mar 19 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 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处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
php连接mssql数据库的几种方法
2013/02/21 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
AngularJs每天学习之总体介绍
2017/08/07 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
详解Python中的正则表达式的用法
2015/04/09 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
2013年研究生毕业感言
2014/02/06 职场文书
体育口号大全
2014/06/18 职场文书
财务总监岗位职责
2015/02/03 职场文书
会议营销主持词
2015/07/03 职场文书
超市店长竞聘书
2015/09/15 职场文书
python非标准时间的转换
2021/07/25 Python
图文详解nginx日志切割的实现
2022/01/18 Servers
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers