526互联

Turn.js网站移动端翻页功能

发布时间 2023-05-31 13:59:33作者: 岁月淡忘了谁

Html页面代码如下：

<html>
<head>

    <!-- content type -->
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

    <!-- viewport -->
    <meta content="width=device-width,initial-scale=1" name="viewport">

    <!-- title -->
    <title>${content.title!}丨${channel.name}丨${site.name}</title>
    <!--js css文件-->
    [#include "../include/header.html"/]
    <!-- add css -->
    <link type="text/css" href="../../../../../../thirdparty/e-books/css/style.css" rel="stylesheet">

    <!-- add js -->
    <script src="../../../../../../thirdparty/e-books/js/jquery.js"></script>
    <script src="../../../../../../thirdparty/e-books/js/turn.js"></script>
    <script src="../../../../../../thirdparty/e-books/js/jquery.fullscreen.js"></script>
    <script src="../../../../../../thirdparty/e-books/js/jquery.address-1.6.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./../../../../../thirdparty/Turn/css/basic.css"/>
    <script type="text/javascript" src="./../../../../../thirdparty/Turn/js/modernizr.2.5.3.min.js"></script>
    <script type="text/javascript" src="./../../../../../thirdparty/Turn/js/main.js"></script>
</head>
<!-- 加载框 -->
<div class="shade">
    <div class="sk-fading-circle">
        <div class="sk-circle1 sk-circle"></div>
        <div class="sk-circle2 sk-circle"></div>
        <div class="sk-circle3 sk-circle"></div>
        <div class="sk-circle4 sk-circle"></div>
        <div class="sk-circle5 sk-circle"></div>
        <div class="sk-circle6 sk-circle"></div>
        <div class="sk-circle7 sk-circle"></div>
        <div class="sk-circle8 sk-circle"></div>
        <div class="sk-circle9 sk-circle"></div>
        <div class="sk-circle10 sk-circle"></div>
        <div class="sk-circle11 sk-circle"></div>
        <div class="sk-circle12 sk-circle"></div>
    </div>
    <div class="number"></div>
</div>
<!-- 书的外边框 -->
<div class="flipbook-viewport" style="display:none;">
    <div class="previousPage"></div>
    <div class="nextPage"></div>
    <div class="return"></div>
    <img class="btnImg" src="./../../../../../thirdparty/Turn/image/btn.gif"/>
    <!--<input type="button" onclick="goPage(20)" value="test">-->
    <div class="container">
        <div class="flipbook">
        </div>
    </div>
</div>
<!--章节按钮-->
<div class="detail-slide-btn book-slide-btn" style="right: 0.2rem; bottom: 0.2rem;">
    <div class="detail-btn-item" uk-toggle="target: #offcanvas-flip"><a><i class="iconfont icon-mulu"></i></a></div>
</div>
<div id="offcanvas-flip" uk-offcanvas="flip: true; overlay: true">
    <div class="uk-offcanvas-bar" style="width: 150px">
        <div class="detail-pz-ml">
            <h3>${channel.name}</h3>
            <ul>
                [@cms_content_list channelId=channel.id orderBy='1']
                [#assign index = 0]
                [#list tag_list as a]
                <li>
                    <a href="javascript:void(0)" onclick="goPage('${index+1}')">${a.title}</a>
                    [#assign index = index + a.pictures?size]
                </li>
                [/#list]
                [/@cms_content_list]
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    // 加载图片
    // 背景图片加载方式，注意路径
    let loading_img_url = [];
    $(function(){
        initQhfyImages();
    })
    function initQhfyImages(){
        //预加载
        $.ajax({
            type:"POST",
            url:"${base}/content/getQhysImages.htm",
            data:{channelId:272},
            dataType:"JSON",
            success:function (res){
                loading_img_url = res.body
                let length = loading_img_url.length;
                let tagHtml = "";
                for (let i = 0; i < length; i++) {
                    if (i == 0) {
                        tagHtml += ' <div id="first" ><img src="' + loading_img_url[i] + '" alt="" style="width:100%;height:100%;"/></div>';
                    } else if (i == length-1) {
                        tagHtml += ' <div id="end" ><img src="' + loading_img_url[i] + '" alt="" style="width:100%;height:100%;"/></div>';
                    } else {
                        tagHtml += ' <div ><img src="' + loading_img_url[i] + '" alt="" style="width:100%;height:100%;"/></div>';
                    }
                }
                $(".flipbook").append(tagHtml);
                $(".flipbook-viewport").show();
                $('.shade').hide();
                loadApp();
            }
        })
    }

    function goPage(page){
        alert(page);
        UIkit.offcanvas($("#offcanvas-flip")).hide();
        $(".flipbook").turn("page", page);
    }
</script>
<script>
    //自定义弹出层
    (function ($) {
        //ios confirm box
        jQuery.fn.confirm = function (title, option, okCall, cancelCall) {
            let defaults = {
                title: null, //what text
                cancelText: '取消', //the cancel btn text
                okText: '确定' //the ok btn text
            };

            if (undefined === option) {
                option = {};
            }
            if ('function' != typeof okCall) {
                okCall = $.noop;
            }
            if ('function' != typeof cancelCall) {
                cancelCall = $.noop;
            }

            let o = $.extend(defaults, option, {title: title, okCall: okCall, cancelCall: cancelCall});

            let $dom = $(this);

            let dom = $('<div class="g-plugin-confirm">');
            let dom1 = $('<div>').appendTo(dom);
            let dom_content = $('<div>').html(o.title).appendTo(dom1);
            let dom_btn = $('<div>').appendTo(dom1);
            let btn_cancel = $('<a href="#"></a>').html(o.cancelText).appendTo(dom_btn);
            let btn_ok = $('<a href="#"></a>').html(o.okText).appendTo(dom_btn);
            btn_cancel.on('click', function (e) {
                o.cancelCall();
                dom.remove();
                e.preventDefault();
            });
            btn_ok.on('click', function (e) {
                o.okCall();
                dom.remove();
                e.preventDefault();
            });

            dom.appendTo($('body'));
            return $dom;
        };
    })(jQuery);

    //上一页
    $(".previousPage").bind("click", function () {
        let pageCount = $(".flipbook").turn("pages");//总页数
        let currentPage = $(".flipbook").turn("page");//当前页
        if (currentPage >= 2) {
            $(".flipbook").turn('page', currentPage - 1);
        } else {
            UIkit.notification({
                message: '<div style="width:100%;text-align:center;color:#faa05a">已经是第一页 !</div>',
                pos: 'top-center',
                timeout: 3000
            });
        }
    });
    // 下一页
    $(".nextPage").bind("click", function () {
        let pageCount = $(".flipbook").turn("pages");//总页数
        let currentPage = $(".flipbook").turn("page");//当前页
        if (currentPage <= pageCount) {
            $(".flipbook").turn('page', currentPage + 1);
            if(currentPage == pageCount){
                UIkit.notification({
                    message: '<div style="width:100%;text-align:center;color:#faa05a">已经是最后一页 !</div>',
                    pos: 'top-center',
                    timeout: 3000
                });
            }
        }
    });


    //返回到目录页
    $(".return").bind("click", function () {
        let currentPage = $(".flipbook").turn("page");//当前页
        if(currentPage == 1){
            UIkit.notification({
                message: '<div style="width:100%;text-align:center;color:#faa05a">当前是首页 !</div>',
                pos: 'top-center',
                timeout: 3000
            });
            return false;
        }
        $(document).confirm('您确定要返回首页吗?', {}, function () {
            $(".flipbook").turn('page', 1); //跳转页数
        }, function () {
        });
    });
</script>
</body>
</html>

Java代码如下：

@PostMapping("/content/getQhysImages.htm")
public void getQhysImages(Integer channelId, HttpServletRequest request, HttpServletResponse response){
	List<Object[]> list = contentMng.getQhysImages(channelId);
	JSONArray jsonArray=new JSONArray();
	for (int i = 0; i < list.size(); i++) {
		jsonArray.put(list.get(i));
	}
	String body = jsonArray.toString();
	String message = Constants.API_MESSAGE_SUCCESS;
	String code = ResponseCode.API_CODE_CALL_SUCCESS;
	ApiResponse apiResponse = new ApiResponse(request, body, message, code);
	ResponseUtils.renderApiJson(response, request, apiResponse);
}