|
|
@@ -0,0 +1,854 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport"
|
|
|
+ content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
|
|
+ <title>电子书</title>
|
|
|
+ <link rel="stylesheet" href="./public/member/manual/css/animate.min.css">
|
|
|
+ <link rel="stylesheet" href="./public/member/manual/css/tooltipster.bundle.min.css">
|
|
|
+ <link rel="stylesheet" href="./public/member/manual/css/tooltipster-sideTip-borderless.min.css">
|
|
|
+ <link rel="stylesheet" href="./public/member/manual/css/progressJS.css">
|
|
|
+ <link rel="stylesheet" href="./public/member/manual/css/zdialog.css">
|
|
|
+ <link rel="stylesheet" href="./public/member/manual/css/style.min.css">
|
|
|
+ <script src="./public/member/manual/js/jquery1.9.0.js"></script>
|
|
|
+ <script src="./public/member/manual/js/jquery-ui-1.9.2.min.js"></script>
|
|
|
+ <script src="./public/member/manual/js/jquery.touchSwipe.min.js"></script>
|
|
|
+ <script src="./public/member/manual/js/modernizr.2.5.3.min.js"></script>
|
|
|
+ <script src="./public/member/manual/js/tooltipster.bundle.js"></script>
|
|
|
+ <script src="./public/member/manual/js/jquery.qrcode.min.js"></script>
|
|
|
+ <script src="./public/member/manual/js/jquery.panzoom.min.js"></script>
|
|
|
+ <script src="./public/member/manual/js/jquery.dragscroll.js"></script>
|
|
|
+ <script src="./public/member/manual/js/jquery.mousewheel.min.js"></script>
|
|
|
+ <script src="./public/member/manual/js/wow.min.js"></script>
|
|
|
+ <script src="./public/member/manual/js/progressJS.js"></script>
|
|
|
+ <script src="./public/member/manual/js/zdialog.js"></script>
|
|
|
+ <script src="./public/data.js"></script>
|
|
|
+ <link rel="stylesheet" href="./public/panonn/static/css/puc.css">
|
|
|
+ <script>
|
|
|
+
|
|
|
+ let page = getQueryParamByKey('pages') || 'pages';
|
|
|
+ let mode = getQueryParamByKey('mode');
|
|
|
+ let currentpage = pages[page]
|
|
|
+
|
|
|
+ var imgWid = currentpage.size[0];
|
|
|
+ var imgHig = currentpage.size[1];
|
|
|
+ var bookArr = [];
|
|
|
+ for (let i = 0; i < currentpage.total; i++) {
|
|
|
+ bookArr.push(`./pages/${page}/${i + 1}.${currentpage.type || 'png'}`)
|
|
|
+ }
|
|
|
+
|
|
|
+ var box_w = window.innerWidth;
|
|
|
+ var box_y = window.innerHeight;
|
|
|
+ var sacle = 1;
|
|
|
+ console.log('比例', imgWid / imgHig, box_w / box_y)
|
|
|
+ if (imgWid / imgHig < box_w / box_y) {
|
|
|
+ sacle = imgWid / box_w;
|
|
|
+ imgWid = imgWid / sacle;
|
|
|
+ imgHig = imgHig / sacle;
|
|
|
+ } else {
|
|
|
+ sacle = imgHig / box_y;
|
|
|
+ imgWid = imgWid / sacle;
|
|
|
+ imgHig = imgHig / sacle;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 信息配置
|
|
|
+ $OP = {
|
|
|
+ list: bookArr,
|
|
|
+ thumbnail: [],
|
|
|
+ width: imgWid,// 图片宽度
|
|
|
+ height: imgHig// 图片高度
|
|
|
+ }
|
|
|
+ console.log('输出OP', $OP)
|
|
|
+ </script>
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ touch-action: pan-y;
|
|
|
+ }
|
|
|
+
|
|
|
+ html {
|
|
|
+ background-image: url(./bg.jpg);
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .flipbook-panzoom {
|
|
|
+ position: fixed;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ z-index: 7;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false"
|
|
|
+ onselectstart="event.returnValue=false">
|
|
|
+ <div class="flipbook-panzoom">
|
|
|
+ <div class="flipbook-viewport nomatrix">
|
|
|
+ <div class="container">
|
|
|
+ <div id="flipbook" class="flipbook"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 附属模块 -->
|
|
|
+ <div class="config">
|
|
|
+ <!-- 底部功能栏 -->
|
|
|
+ <div class="bottom_box bottom_p">
|
|
|
+ <div class="bottom_bar">
|
|
|
+ <!-- <div class="btnbox tooltip thumbnail" title="缩略图"></div> -->
|
|
|
+ <div class="btnbox tooltip playpage" title="自动翻页" style="background-size: auto 75%"></div>
|
|
|
+ <div class="btnbox tooltip shangyiye" title="上一页"></div>
|
|
|
+ <div class="btninput tooltip" title="当前页面/总页数">
|
|
|
+ <input id="pagenum" type="text" onkeyup="value=value.replace(/[^\d]/g,'')">
|
|
|
+ </div>
|
|
|
+ <div class="btnbox tooltip xiayiye" title="下一页"></div>
|
|
|
+ <div class="btnbox tooltip flsize" title="放大/还原" style="background-size: auto 75%;"></div>
|
|
|
+ <div class="btnbox tooltip bangzhu" title="使用帮助" style="display: none;"></div>
|
|
|
+ <div class="qrcode">
|
|
|
+ <div class="btnbox" style="margin: 3px;display: none;"><img
|
|
|
+ src="./public/member/manual/img/erweima2.svg"></div>
|
|
|
+ <div class="qrimg">
|
|
|
+ <p>扫一扫，手机阅读</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- pc缩略图 -->
|
|
|
+ <div class="thumbnail_box_p">
|
|
|
+ <div class="thumbnail_p">
|
|
|
+ <ul></ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 移动缩略图 -->
|
|
|
+ <div class="thumbnail_box_v animated">
|
|
|
+ <div class="title">
|
|
|
+ <h3 style="line-height: 2.8;">缩略图列表</h3>
|
|
|
+ <img class="off" src="./public/member/manual/img/off.svg">
|
|
|
+ </div>
|
|
|
+ <div class="box_list">
|
|
|
+ <ul></ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 自动播放速度控制器 -->
|
|
|
+ <div class="speed_p" style="z-index: 8">
|
|
|
+ <span>翻页速度</span>
|
|
|
+ <img src="./public/member/manual/img/minus.svg" style="left: 82px;">
|
|
|
+ <div class="spran">
|
|
|
+ <div class="progress_p"></div>
|
|
|
+ </div>
|
|
|
+ <img src="./public/member/manual/img/add.svg" style="right: 5px;">
|
|
|
+ </div>
|
|
|
+ <div class="speed_v" style="z-index: 8">
|
|
|
+ <span>翻页速度</span>
|
|
|
+ <img src="./public/member/manual/img/add.svg" style="top: 5px;">
|
|
|
+ <div class="spran">
|
|
|
+ <div class="progress_v"></div>
|
|
|
+ </div>
|
|
|
+ <img src="./public/member/manual/img/minus.svg" style="bottom: 47px;">
|
|
|
+ </div>
|
|
|
+ <!-- 帮助 -->
|
|
|
+ <div class="help help_p">
|
|
|
+ <div class="helpbox">
|
|
|
+ <div>
|
|
|
+ <p>缩略图</p>
|
|
|
+ <img src="./public/member/manual/img/1xian.png">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>自动翻页</p>
|
|
|
+ <img src="./public/member/manual/img/2xian.png">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>上一页</p>
|
|
|
+ <img src="./public/member/manual/img/3xian.png">
|
|
|
+ </div>
|
|
|
+ <div style="width: 70px;">
|
|
|
+ <p>当前页面/总页数</p>
|
|
|
+ <img src="./public/member/manual/img/4xian.png">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>下一页</p>
|
|
|
+ <img src="./public/member/manual/img/3xian.png">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>放大/还原</p>
|
|
|
+ <img src="./public/member/manual/img/2xian.png">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>使用帮助</p>
|
|
|
+ <img src="./public/member/manual/img/1xian.png">
|
|
|
+ </div>
|
|
|
+ <div class="helpqr">
|
|
|
+ <p>手机扫码阅读</p>
|
|
|
+ <img src="./public/member/manual/img/1xian.png">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="help_m"></div>
|
|
|
+ </div>
|
|
|
+ <div class="puc_bg" style="display: block;"></div>
|
|
|
+ <i class="puc_col2 book_close" style="display: none;"> </i>
|
|
|
+ <script>
|
|
|
+ var thumbnailoff = false // 缩略图开关
|
|
|
+ var thumbnailinit = true
|
|
|
+ var onpalyer = false // 自动翻页开关
|
|
|
+ var palytime = null // 定时器
|
|
|
+ var timenum = 5000 // 定时器
|
|
|
+ var flsizeoff = false // 缩放开关
|
|
|
+ var helptem = false // 帮助开关
|
|
|
+ var blsalc = 1 // 书的缩放比例
|
|
|
+ var winsalc = 1 // 缩放比例
|
|
|
+ var panzoom = null// 放大拖动
|
|
|
+ if (/windows phone|iphone|android/ig.test(window.navigator.userAgent)) {
|
|
|
+ $(".book_close").css("top", ".3rem");
|
|
|
+ $(".book_close").css("right", ".3rem");
|
|
|
+ }
|
|
|
+ $("#flipbook").append('<div class="page" style="width:' + $OP.width + 'px;height:' + $OP.height + 'px"><img style="width:100%;height:100%" src = "' + $OP.list[0] + '"/></div>');
|
|
|
+
|
|
|
+ // 缩略图
|
|
|
+ $(".thumbnail").click(function () {
|
|
|
+ if (thumbnailinit) {
|
|
|
+ var tem = ''
|
|
|
+ if ($OP.list.length % 2 == 0) {
|
|
|
+ for (var i = 0; i < $OP.list.length; i++) {
|
|
|
+ $(".thumbnail_box_v ul").append('<li data-page="' + (Number([i]) + 1) + '"><div class="xv"><img src="' + $OP.thumbnail[i] + '"><div></div></div></li>');
|
|
|
+ if (i == 0 || i == $OP.list.length - 1) {
|
|
|
+ tem += '<li data-page="' + (Number([i]) + 1) + '"><div class="pagebox"><div data-page="' + (Number([i]) + 1) + '"><img src="' + $OP.thumbnail[i] + '"></div></div></li>'
|
|
|
+ } else if (i % 2 == 0) {
|
|
|
+ tem += '<div data-page="' + (Number([i]) + 1) + '"><img src="' + $OP.thumbnail[i] + '"></div></li>'
|
|
|
+ } else {
|
|
|
+ tem += '<li data-page="' + (Number([i]) + 1) + '"><div class="pagebox"><div data-page="' + (Number([i]) + 1) + '"><img src="' + $OP.thumbnail[i] + '"></div>'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (var i = 0; i < $OP.list.length; i++) {
|
|
|
+ $(".thumbnail_box_v ul").append('<li data-page="' + (Number([i]) + 1) + '"><div class="xv"><img src="' + $OP.thumbnail[i] + '"><div></div></div></li>');
|
|
|
+ if (i == 0) {
|
|
|
+ tem += '<li data-page="' + (Number([i]) + 1) + '"><div class="pagebox"><div data-page="' + (Number([i]) + 1) + '"><img src="' + $OP.thumbnail[i] + '"></div></div></li>'
|
|
|
+ } else if (i % 2 == 0) {
|
|
|
+ tem += '<div data-page="' + (Number([i]) + 1) + '"><img src="' + $OP.thumbnail[i] + '"></div></li>'
|
|
|
+ } else {
|
|
|
+ tem += '<li data-page="' + (Number([i]) + 1) + '"><div class="pagebox"><div data-page="' + (Number([i]) + 1) + '"><img src="' + $OP.thumbnail[i] + '"></div>'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ $(".thumbnail_box_p ul").append(tem);
|
|
|
+ tem = null
|
|
|
+ $(".pagebox>div").css("width", 70 * ($OP.width / $OP.height) + "px")
|
|
|
+ $(".xv").css("padding-bottom", $OP.height / $OP.width * 100 + "%")
|
|
|
+ thumbnailinit = false
|
|
|
+ }
|
|
|
+ thumbnailoff = !thumbnailoff
|
|
|
+ if (thumbnailoff) {
|
|
|
+ $(this).css("background-color", "rgba(0, 0, 0, 0.5) !important")
|
|
|
+ var pagenum = $('.flipbook').turn('page')
|
|
|
+ if ($(window).width() >= 600) {
|
|
|
+ $(".thumbnail_box_p").fadeIn()
|
|
|
+ var Oact_p = $(".thumbnail_box_p li div[data-page='" + pagenum + "']").parent().parent()
|
|
|
+ Oact_p.addClass("active").siblings().removeClass("active")
|
|
|
+ } else {
|
|
|
+ $(".thumbnail_box_v").fadeIn().addClass('fadeInUp').removeClass("fadeOutDownBig");
|
|
|
+ var Oact_v = $(".thumbnail_box_v li[data-page='" + pagenum + "']")
|
|
|
+ Oact_v.addClass("active").siblings().removeClass("active")
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ offthum()
|
|
|
+ }
|
|
|
+ pansepalyer()
|
|
|
+ })
|
|
|
+
|
|
|
+ // 缩略图拖动
|
|
|
+ $('.thumbnail_box_p ul').dragscroll({
|
|
|
+ direction: 'scrollLeft',
|
|
|
+ });
|
|
|
+
|
|
|
+ // 关闭缩略图
|
|
|
+ function offthum() {
|
|
|
+ thumbnailoff = false
|
|
|
+ $(".thumbnail").css("background-color", "")
|
|
|
+ $(".thumbnail_box_p").fadeOut()
|
|
|
+ $(".thumbnail_box_v").fadeOut()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 缩略图跳转
|
|
|
+ $(".thumbnail_box_p").on("click", "li", function () {
|
|
|
+ $('.flipbook').turn('page', $(this).data("page"))
|
|
|
+ $(this).addClass("active").siblings().removeClass("active")
|
|
|
+
|
|
|
+ })
|
|
|
+ $(".thumbnail_box_v").on("click", "li", function () {
|
|
|
+ thumbnailoff = !thumbnailoff
|
|
|
+ $(".thumbnail_box_v").fadeOut().addClass('fadeOutDownBig').removeClass("fadeInUp");
|
|
|
+ $('.flipbook').turn('page', $(this).data("page"))
|
|
|
+
|
|
|
+ })
|
|
|
+ $(".thumbnail_box_v .off").click(function () {
|
|
|
+ thumbnailoff = !thumbnailoff
|
|
|
+ $(".thumbnail_box_v").addClass('fadeOutDownBig').removeClass("fadeInUp");
|
|
|
+ offthum()
|
|
|
+ })
|
|
|
+
|
|
|
+ // 自动翻页
|
|
|
+ $(".playpage").click(function () {
|
|
|
+ onpalyer = !onpalyer
|
|
|
+ if (onpalyer) {
|
|
|
+ $(".playpage").css("background-image", "url(./public/member/manual/img/pause.png)")
|
|
|
+ palytime = setInterval(function () {
|
|
|
+ if ($('.flipbook').turn('page') != $('.flipbook').turn('pages')) {
|
|
|
+ $('.flipbook').turn('next');
|
|
|
+
|
|
|
+ } else {
|
|
|
+ $('.flipbook').turn('page', 1);
|
|
|
+
|
|
|
+ }
|
|
|
+ }, timenum)
|
|
|
+ if ($(window).width() >= 600) {
|
|
|
+ speedOff('.speed_p')
|
|
|
+ } else {
|
|
|
+ speedOff('.speed_v')
|
|
|
+ }
|
|
|
+ offthum()
|
|
|
+ } else {
|
|
|
+ pansepalyer()
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 拉杆4秒自动隐藏
|
|
|
+ var disout
|
|
|
+ function speedOff(e) {
|
|
|
+ $(e).fadeIn()
|
|
|
+ if (disout) clearTimeout(disout);
|
|
|
+ disout = setTimeout(function () {
|
|
|
+ $(e).fadeOut()
|
|
|
+ }, 4000)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 翻页时间控制
|
|
|
+ var progress_p = new Progress('.progress_p', {
|
|
|
+ val: 80,
|
|
|
+ size: 4,
|
|
|
+ precision: 0,
|
|
|
+ drag: true,
|
|
|
+ direction: 'horizontal',
|
|
|
+ getVal: function (el) {
|
|
|
+ speedOff('.speed_p')
|
|
|
+ timenum = ((100 - el.val) / 100 * 20 + 1) * 1000
|
|
|
+ clearInterval(palytime)
|
|
|
+ palytime = setInterval(function () {
|
|
|
+ if ($('.flipbook').turn('page') != $('.flipbook').turn('pages')) {
|
|
|
+ $('.flipbook').turn('next');
|
|
|
+
|
|
|
+ } else {
|
|
|
+ $('.flipbook').turn('page', 1);
|
|
|
+
|
|
|
+ }
|
|
|
+ }, timenum)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ var progress_v = new Progress('.progress_v', {
|
|
|
+ val: 80, //初始值 取值范围：0-100
|
|
|
+ size: 4, //控件大小默认值为10，可结合css自行修改样式
|
|
|
+ precision: 0, //val精度配置，默认保留0位小数,最多配位4位
|
|
|
+ drag: true, //默认开启拖拽，关闭设为false，不配置默认为true
|
|
|
+ direction: 'vertical', //方向 默认水平 vertical 垂直
|
|
|
+ getVal: function (el) {
|
|
|
+ speedOff('.speed_v')
|
|
|
+ timenum = ((100 - el.val) / 100 * 20 + 1) * 1000
|
|
|
+ clearInterval(palytime)
|
|
|
+ palytime = setInterval(function () {
|
|
|
+ if ($('.flipbook').turn('page') != $('.flipbook').turn('pages')) {
|
|
|
+ $('.flipbook').turn('next');
|
|
|
+
|
|
|
+ } else {
|
|
|
+ $('.flipbook').turn('page', 1);
|
|
|
+
|
|
|
+ }
|
|
|
+ }, timenum)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 取消自动翻页
|
|
|
+ function pansepalyer() {
|
|
|
+ onpalyer = false
|
|
|
+ $(".playpage").css("background-image", "url(./public/member/manual/img/play.png)")
|
|
|
+ $(".speed_p").fadeOut()
|
|
|
+ $(".speed_v").fadeOut()
|
|
|
+ clearInterval(palytime)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 上一页
|
|
|
+ $(".shangyiye").click(function () {
|
|
|
+ onprevious()
|
|
|
+ offthum()
|
|
|
+ })
|
|
|
+
|
|
|
+ // 页码跳转
|
|
|
+ var isval
|
|
|
+ $("#pagenum").focus(function () {
|
|
|
+ isval = $("#pagenum").val()
|
|
|
+ $("#pagenum").val("")
|
|
|
+ })
|
|
|
+ $("#pagenum").keyup(function (event) {
|
|
|
+ if (event.keyCode == 13) {
|
|
|
+ gopage()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ $("#pagenum").blur(function () {
|
|
|
+ gopage()
|
|
|
+ })
|
|
|
+ function gopage() {
|
|
|
+ if ($("#pagenum").val() == isval.replace("/", "")) {
|
|
|
+ $("#pagenum").val(isval)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if ($("#pagenum").val() == "") {
|
|
|
+ $("#pagenum").val(isval)
|
|
|
+ } else {
|
|
|
+ if ($("#pagenum").val() <= 0) {
|
|
|
+ $('.flipbook').turn('page', "1");
|
|
|
+ } else if ($("#pagenum").val() > $('.flipbook').turn('pages')) {
|
|
|
+ $('.flipbook').turn('page', $('.flipbook').turn('pages'));
|
|
|
+ } else {
|
|
|
+ $('.flipbook').turn('page', $("#pagenum").val());
|
|
|
+ }
|
|
|
+ pansepalyer()
|
|
|
+ isval = $("#pagenum").val()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 下一页
|
|
|
+ $(".xiayiye").click(function () {
|
|
|
+ onnext()
|
|
|
+ offthum()
|
|
|
+ })
|
|
|
+
|
|
|
+ // 初始化panzoom
|
|
|
+ $(".flipbook-panzoom").panzoom()
|
|
|
+ flmove(true)
|
|
|
+ var offs
|
|
|
+ $(".flipbook-panzoom").on('panzoomzoom', function (event, scale) {
|
|
|
+ flsizeoff = true
|
|
|
+ enlarge()
|
|
|
+ if (offs) clearTimeout(offs);
|
|
|
+ offs = setTimeout(function () {
|
|
|
+ if (scale.scale < 1) {
|
|
|
+ narrow()
|
|
|
+ } else {
|
|
|
+ $.DialogByZ.Autofade({ Content: "双击可还原" })
|
|
|
+ }
|
|
|
+ }, 300)
|
|
|
+ });
|
|
|
+
|
|
|
+ // 放大与还原
|
|
|
+ $(".flsize").click(function () {
|
|
|
+ offthum()
|
|
|
+ if (!flsizeoff) {
|
|
|
+ enlarge()
|
|
|
+ $.DialogByZ.Autofade({ Content: "双击可还原" })
|
|
|
+ } else {
|
|
|
+ narrow()
|
|
|
+ }
|
|
|
+ pansepalyer()
|
|
|
+ })
|
|
|
+
|
|
|
+ // 放大时双击还原
|
|
|
+ let clicked = 1
|
|
|
+ let clickedTime = {
|
|
|
+ timeA: '',
|
|
|
+ timeB: ''
|
|
|
+ }
|
|
|
+ $(".flipbook-panzoom").on('panzoomend', function (e, panzoom, matrix, changed) {
|
|
|
+ // if (changed) {
|
|
|
+ // 屏幕点击控制
|
|
|
+ if ($(window).width() >= 600) {
|
|
|
+ if (onpalyer) {
|
|
|
+ speedOff('.speed_p')
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (onpalyer) {
|
|
|
+ speedOff('.speed_v')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // } else {
|
|
|
+ // 放大时双击还原
|
|
|
+ if (clicked === 1) {
|
|
|
+ clickedTime.timeA = new Date()
|
|
|
+ clicked++
|
|
|
+ } else if (clicked === 2) {
|
|
|
+ clickedTime.timeB = new Date()
|
|
|
+ if (Math.abs(clickedTime.timeA - clickedTime.timeB) < 200) {
|
|
|
+ if (flsizeoff) {
|
|
|
+ narrow()
|
|
|
+ } else {
|
|
|
+ enlarge()
|
|
|
+ }
|
|
|
+ clicked = 1
|
|
|
+ } else {
|
|
|
+ clickedTime.timeA = new Date()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // }
|
|
|
+ offthum()
|
|
|
+ });
|
|
|
+
|
|
|
+ // 放大
|
|
|
+ function enlarge() {
|
|
|
+ flsizeoff = true
|
|
|
+ $(".flipbook-panzoom").panzoom("zoom", blsalc = 2, { // 缩放
|
|
|
+ silent: true
|
|
|
+ });
|
|
|
+ $(".flsize").css("background-image", "url(./public/member/manual/img/narrow_icon.png)")
|
|
|
+
|
|
|
+ flmove(false)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 还原
|
|
|
+ function narrow() {
|
|
|
+ flsizeoff = false
|
|
|
+ $(".flsize").css("background-image", "url(./public/member/manual/img/enlarge_icon.png)")
|
|
|
+
|
|
|
+ $(".flipbook-panzoom").panzoom("reset")
|
|
|
+ blsalc = 1
|
|
|
+ flmove(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 是否禁止拖动
|
|
|
+ function flmove(off) {
|
|
|
+ $(".flipbook-panzoom").panzoom("option", {
|
|
|
+ disableXAxis: off,
|
|
|
+ disableYAxis: off,
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 帮助
|
|
|
+ $(".bangzhu").click(function () {
|
|
|
+ offthum()
|
|
|
+ helptem = !helptem
|
|
|
+ if (helptem) {
|
|
|
+ $(".help").fadeIn()
|
|
|
+ $(".help_m").css("display", "block")
|
|
|
+ } else {
|
|
|
+ $(".help").fadeOut()
|
|
|
+ $(".help_m").css("display", "none")
|
|
|
+ }
|
|
|
+ pansepalyer()
|
|
|
+ })
|
|
|
+ $(".help_m").click(function () {
|
|
|
+ helptem = !helptem
|
|
|
+ $(".help").fadeOut()
|
|
|
+ $(".help_m").css("display", "none")
|
|
|
+ })
|
|
|
+
|
|
|
+ // 二维码
|
|
|
+ $('.qrimg').qrcode({
|
|
|
+ render: "canvas", //也可以替换为table
|
|
|
+ text: window.location.href,
|
|
|
+ size: 135,
|
|
|
+ mode: 0,
|
|
|
+ fill: "#000",
|
|
|
+ background: "#fff",
|
|
|
+ radius: .5
|
|
|
+ });
|
|
|
+
|
|
|
+ function isChrome() {
|
|
|
+ return navigator.userAgent.indexOf('Chrome') != -1;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 初始配置
|
|
|
+ function loadApp() {
|
|
|
+ var flipbook = $('.flipbook');
|
|
|
+ // 检查CSS是否已经加载
|
|
|
+ if (flipbook.width() == 0 || flipbook.height() == 0) {
|
|
|
+ setTimeout(loadApp, 10);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 翻书主体配置项
|
|
|
+ $('.flipbook').turn({
|
|
|
+ elevation: 50,// 转换期间页面的高度
|
|
|
+ acceleration: !isChrome(),// 设置硬件加速模式，对于触摸设备（移动端），此值必须为真。
|
|
|
+ pages: $OP.list.length,
|
|
|
+ direction: mode || 'ltr', //rtl从右到左，ltr左到右
|
|
|
+ autoCenter: true, // 居中
|
|
|
+ gradients: false,// 显示渐变阴影
|
|
|
+ duration: 1000,// 设置翻页动画持续时间即翻页的快慢，默认600
|
|
|
+ when: {
|
|
|
+ // 页面启动时触发
|
|
|
+ start: function (e, page, view) {
|
|
|
+ setTimeout(function () {
|
|
|
+ getpagenum()
|
|
|
+ updateDepth()
|
|
|
+ }, 100)
|
|
|
+ },
|
|
|
+ // 当前范围需要某些页面时 触发此事件
|
|
|
+ missing: function (event, pages) {
|
|
|
+ for (var i = 0; i < pages.length; i++) {
|
|
|
+ addPage(pages[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ getpagenum()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 配置依赖文件
|
|
|
+ yepnope({
|
|
|
+ test: Modernizr.csstransforms,
|
|
|
+ yep: ['./public/member/manual/lib/turn.min.js'],
|
|
|
+ nope: ['./public/member/manual/lib/turn.html4.min.js'],
|
|
|
+ both: ['./public/member/manual/js/index.js', './public/member/manual/lib/scissor.min.js', './public/member/manual/css/fl.css'],
|
|
|
+ complete: loadApp
|
|
|
+ });
|
|
|
+
|
|
|
+ // 配置缩略图信息
|
|
|
+ $OP.list.forEach(val => {
|
|
|
+ var i = val.lastIndexOf(".")
|
|
|
+ $OP.thumbnail.push(val.slice(0, i) + val.slice(i))
|
|
|
+ });
|
|
|
+
|
|
|
+ // 动态加载内容图片
|
|
|
+ function addPage(page) {
|
|
|
+ var pages = $('.flipbook').turn('pages');
|
|
|
+ var element = $('<div class="page" style="width:' + $OP.width + 'px;height:' + $OP.height + 'px"></div>', {});
|
|
|
+ if ($('.flipbook').turn('addPage', element, page)) {
|
|
|
+ console.log('查看', page, $OP.list.length)
|
|
|
+ if (page == $OP.list.length) {
|
|
|
+ element.html('<img style="width:100%;height:100%" src = "' + './pages/1/73.png' + '"/>');
|
|
|
+ } else {
|
|
|
+ element.html('<img style="width:100%;height:100%" src = "' + $OP.list[page] + '"/>');
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //鼠标滚轮事件
|
|
|
+ $('.flipbook-viewport').mousewheel(function (event, delta, deltaX, deltaY) {
|
|
|
+ if (blsalc <= 1) {
|
|
|
+ if (delta == 1) {
|
|
|
+ $('.flipbook').turn('previous');
|
|
|
+ } else {
|
|
|
+ $('.flipbook').turn('next');
|
|
|
+ }
|
|
|
+ flsizeoff = false
|
|
|
+ $(".flsize").css("background-image", "url(./public/member/manual/img/comiisfangda.png)")
|
|
|
+ pansepalyer()
|
|
|
+ } else {
|
|
|
+ if (delta == 1) {
|
|
|
+ if (blsalc > 5) return
|
|
|
+ blsalc = blsalc + 0.1
|
|
|
+ } else {
|
|
|
+ if (blsalc <= 1) return
|
|
|
+ blsalc = blsalc - 0.1
|
|
|
+ }
|
|
|
+ flsizeoff = true
|
|
|
+ $(".flipbook-panzoom").panzoom("zoom", blsalc, {
|
|
|
+ silent: true
|
|
|
+ });
|
|
|
+ $(".flsize").css("background-image", "url(./public/member/manual/img/comiissuoxiao.png)")
|
|
|
+ flmove(false)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // wow动画
|
|
|
+ if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
|
|
|
+ new WOW().init();
|
|
|
+ };
|
|
|
+
|
|
|
+ // 手机阅读二维码
|
|
|
+ $(".qrcode").hover(function () {
|
|
|
+ $(".qrimg").fadeIn()
|
|
|
+ }, function () {
|
|
|
+ $(".qrimg").fadeOut()
|
|
|
+ })
|
|
|
+
|
|
|
+ // 页码显示
|
|
|
+ function getpagenum() {
|
|
|
+ $("#pagenum").val($('.flipbook').turn('page') + '/' + $('.flipbook').turn('pages'))
|
|
|
+ }
|
|
|
+
|
|
|
+ // 执行上一页
|
|
|
+ function onprevious() {
|
|
|
+ if ($('.flipbook').turn('page') == 1) {
|
|
|
+ $.DialogByZ.Autofade({ Content: "这是第一页" })
|
|
|
+ }
|
|
|
+ $('.flipbook').turn('previous');
|
|
|
+ pansepalyer()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 执行下一页
|
|
|
+ function onnext() {
|
|
|
+ if ($('.flipbook').turn('page') == $('.flipbook').turn('pages')) {
|
|
|
+ $.DialogByZ.Autofade({ Content: "这是最后一页" })
|
|
|
+ }
|
|
|
+ $('.flipbook').turn('next');
|
|
|
+ pansepalyer()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 翻书厚度
|
|
|
+ function updateDepth() {
|
|
|
+ if ($(window).width() >= 600) {
|
|
|
+ if ($(".p" + $('.flipbook').turn('pages')).length) {
|
|
|
+ $(".p" + $('.flipbook').turn('pages')).addClass("plast")
|
|
|
+ }
|
|
|
+ $(".odd").each(function () {
|
|
|
+ if ($(this).find(".oddshadow").length == 0) {
|
|
|
+ $(this).append("<div class='oddshadow'></div>")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ $(".even").each(function () {
|
|
|
+ if ($(this).find(".evenshadow").length == 0) {
|
|
|
+ $(this).append("<div class='evenshadow'></div>")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ var page = $('.flipbook').turn('page'),
|
|
|
+ pages = $('.flipbook').turn('pages'),
|
|
|
+ depthWidth = page / 4
|
|
|
+ if (page == pages || page == 1) {
|
|
|
+ $('.flipbook .thickness_left').css({
|
|
|
+ width: 0,
|
|
|
+ left: 0
|
|
|
+ });
|
|
|
+ $('.flipbook .thickness').css({
|
|
|
+ width: 0,
|
|
|
+ right: 0
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ $('.flipbook .thickness_left').css({
|
|
|
+ width: depthWidth / winsalc,
|
|
|
+ left: -depthWidth / winsalc
|
|
|
+ });
|
|
|
+ $('.flipbook .thickness').css({
|
|
|
+ width: (pages / 4 - depthWidth) / winsalc,
|
|
|
+ right: -(pages / 4 - depthWidth) / winsalc
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ $(function () {
|
|
|
+ // 翻书触摸触发翻页
|
|
|
+ // $("#flipbook").swipe({
|
|
|
+ // swipeLeft: function () {
|
|
|
+ // if (!flsizeoff) {
|
|
|
+ // onnext()
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // swipeRight: function () {
|
|
|
+ // if (!flsizeoff) {
|
|
|
+ // onprevious()
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+
|
|
|
+ // 翻书触摸触发翻页
|
|
|
+ $("#flipbook").swipe({
|
|
|
+ swipeLeft: function () {
|
|
|
+ if (!flsizeoff) {
|
|
|
+ if (window.location.href.includes('rtl')) onprevious()
|
|
|
+ else onnext()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ swipeRight: function () {
|
|
|
+ if (!flsizeoff) {
|
|
|
+ if (window.location.href.includes('rtl')) onnext()
|
|
|
+ else onprevious()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ // title提示语
|
|
|
+ $('.tooltip').tooltipster({
|
|
|
+ theme: 'tooltipster-borderless',
|
|
|
+ delay: 600,
|
|
|
+ });
|
|
|
+ })
|
|
|
+
|
|
|
+ // 宽度大小适配
|
|
|
+ function windowonresize() {
|
|
|
+ if ($(window).width() >= 600) {
|
|
|
+ // PC
|
|
|
+ $('.flipbook').turn('display', "double");
|
|
|
+ $(".bottom_box").addClass("bottom_p").removeClass("bottom_v")
|
|
|
+ $(".help").addClass("help_p").removeClass("help_v")
|
|
|
+ $(".qrcode").fadeIn()
|
|
|
+ if ($OP.width * 2 > $(window).width() || $OP.height > $(window).height()) {
|
|
|
+ winsalc = ($(window).width() - 100) / ($OP.width * 2)
|
|
|
+ var heisalc = ($(window).height() - 120) / $OP.height
|
|
|
+ var salc = winsalc > heisalc ? heisalc : winsalc
|
|
|
+ $(".flipbook-viewport").css({
|
|
|
+ "transform": "scale(" + salc + ")",
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ $(".flipbook-viewport").css({
|
|
|
+ "transform": "scale(1)",
|
|
|
+ })
|
|
|
+ }
|
|
|
+ $(".flipbook-viewport .flipbook").css({ "width": ($OP.width * 2) + "px", "height": $OP.height + "px", "left": "-" + $OP.width + "px", "top": "-" + ($OP.height / 2) + "px" })
|
|
|
+ $(".page").css("height", $OP.height)
|
|
|
+ } else {
|
|
|
+ // 移动端
|
|
|
+ $(".odd .oddshadow").remove()
|
|
|
+ $(".even .evenshadow").remove()
|
|
|
+ $('.flipbook').turn('display', "single");
|
|
|
+ $(".bottom_box").addClass("bottom_v").removeClass("bottom_p")
|
|
|
+ $(".help").addClass("help_v").removeClass("help_p")
|
|
|
+ $(".qrcode").fadeOut()
|
|
|
+ if ($OP.width * 2 > $(window).width()) {
|
|
|
+ winsalc = $(window).width() / ($OP.width * 2)
|
|
|
+ $(".flipbook-viewport").css({
|
|
|
+ "transform": "scale(" + winsalc + ")",
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ $(".flipbook-viewport").css({
|
|
|
+ "transform": "scale(1)",
|
|
|
+ })
|
|
|
+ }
|
|
|
+ $(".flipbook-viewport .flipbook").css({ "width": ($OP.width * 2) + "px", "height": $OP.height * 2 + "px", "left": "-" + $OP.width + "px", "top": "-" + ($OP.height) + "px" })
|
|
|
+ $(".page").css("height", $OP.height * 2)
|
|
|
+ }
|
|
|
+ offthum()
|
|
|
+ $(".speed_p").hide()
|
|
|
+ $(".speed_v").hide()
|
|
|
+ pansepalyer()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 监听窗口
|
|
|
+ var timer;
|
|
|
+ $(window).resize(function () {
|
|
|
+ if (timer) clearTimeout(timer);
|
|
|
+ timer = setTimeout(function () {
|
|
|
+ windowonresize()
|
|
|
+ setTimeout(() => {
|
|
|
+ windowonresize()
|
|
|
+ }, 500);
|
|
|
+ }, 300)
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 微信禁止拖动
|
|
|
+ // document.body.addEventListener('touchmove', function (evt) {
|
|
|
+ // evt.preventDefault()
|
|
|
+ // }, { passive: false })
|
|
|
+
|
|
|
+ // 苹果
|
|
|
+ function isIOS() {
|
|
|
+ var u = navigator.userAgent;
|
|
|
+ var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
|
|
|
+ if (isiOS) {
|
|
|
+ $(".bottom_v").css("height", "60px")
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 公共关闭弹窗
|
|
|
+ $(document).on('click', '.book_close', function () {
|
|
|
+ if (window.parent.vue_app) {
|
|
|
+ window.parent.vue_app.close_iframe();
|
|
|
+ return
|
|
|
+ }
|
|
|
+ window.parent.close_iframe();
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
aamin
hai 1 ano
