<%@ 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 content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <meta content="telephone=no"> <meta content="yes"/> <meta content="black"/> <title>阅读</title> <script src="https://www.jb51.net/${ctxStatic}/plugins/jquery-3.2.1.min.js"></script> <script src="https://www.jb51.net/${ctxStatic}/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script src="https://www.jb51.net/${ctxStatic}/modules/front/guide/vertical/common/js/common.js"></script> <script type="text/javascript" src="https://www.jb51.net/${ctxStatic}/modules/front/guide/vertical/js/modernizr.2.5.3.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/${ctxStatic}/modules/front/guide/vertical/js/main.js"></script> <script src="https://www.jb51.net/${ctxStatic}/modules/front/guide/vertical/common/js/flexible.js"></script> <link href="https://www.jb51.net/${ctxStatic}/modules/front/guide/vertical/css/app-base.css"> <style type="text/css"> .flipbook img{ width:10rem; height:15.2rem; } .book-wrapper{ background-image: url(''); } </style> </head> <body> <div> <header> <h1>阅读</h1> </header> <div> <!-- 书本区域 --> <div> <div></div> <div></div> <div></div> <div> <div> </div> </div> </div> </div> <!-- 悬浮菜单 --> <nav> <div> <ul> <li> <a href="javascript:;"> <i></i></a> </li> <li> <a href="javascript:;" οnclick="prev()"> <i></i></a> </li> <li> <p><span>0</span><span>/0</span></p> </li> <li> <a href="javascript:;" οnclick="next()"> <i></i></a> </li> <li> <div> <span>跳至</span> <input type="text"> <div></div> <span>页</span> </div> </li> <li> <a href="https://www.jb51.net/${front}/guide/vertical/index"> <i></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="https://www.jb51.net/${ctxStatic}/modules/front/guide/vertical/common/virtualkeyboard/keyboard.js"></script>
turn.js异步加载实现翻书效果(2)
内容版权声明：除非注明，否则皆为本站原创文章。
转载注明出处：http://www.heiqu.com/991029becae69e07dbea2a542b9ad4d5.html