chenzimin2
/
ningbobang


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854
							<!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>