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.jsfunction 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 bookif (!book.turn('hasPage', page)) {// Create an element for this pagevar element = $('<div />').html('');// Add the pagebook.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="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" onclick="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" onclick="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>

turn.js 异步加载实现翻书效果相关推荐

turn.js异步加载实现翻书效果
<div class="m-art-cont"><script type="text/javascript" src="/Runti ...
【前端】JS异步加载
文章目录为什么要异步加载如何实现异步加载参考为什么要异步加载两个原因其实是一个意思. 原因1: JS是单线程的语言,它会同步的执行代码,从上往下执行但是,一旦网络不好,或要加载的js文件过 ...
知识点讲解五：处理js异步加载问题
文章目录前言环境代码思路原代码前言在新闻网站中大多采用的是异步加载模式,新闻条目会随滚动条的滚动而逐渐加载.当爬虫访问这类网站时得到的HTML数据仅仅是我们看到的页面数据,只有当我们向下滚 ...
实现JS异步加载的三种方法
一.为什么要写异步加载: ①js加载本身是属于同步加载的,加载js文件会阻塞文档,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作.但是有些工具方法需要按需加载,有一些工具js文件它是不 ...
JS 异步加载js的三种方案
js文件同步加载的缺点: 页面的js文件一般是同步加载,加载到js文件会阻断html和css的加载,要等到js文件加载完毕,才能继续向下执行,因为js文件可能会操作html和css:但有些js文件不会 ...
js延迟加载、js异步加载
1.js延迟加载 (1)js延迟加载是js性能优化的一种方式 (2)作用:为了提高网页的加载速度 (3)原理:等网页加载完成之后再加载js文件 ··需要优化的原 ...
JS异步加载及解决方式
1.js中的同步加载和异步加载有什么不同? javascript语言是单线程机制.所谓单线程就是按次序执行,执行完一个任务再执行下一个. 对于浏览器来说,也就是无法在渲染页面的同时执行代码. 同步加载 ...
yepnope.js 异步加载资源文件
yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css. yepnope的优点: 可以同时处理javascript以及css 能够按条件 ...
yepnope.js – 异步加载资源文件
yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css. 典型代码示例 yepnope({test : Modernizr.geoloc ...

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

turn.js 异步加载实现翻书效果相关推荐

最新文章

热门文章