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

这篇文章主要为大家详细介绍了turn.js异步加载实现翻书效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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 = 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 = 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 += "
"; } else if (page == length) { tagHtml += "
"; } else { tagHtml += "
"; } // Check if the page is not in the book if (!book.turn('hasPage', page)) { // Create an element for this page var element = $('
').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" %>  阅读 

阅读

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持html中文网。

以上就是turn.js异步加载实现翻书效果的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 教程