js翻页效果实现

1、说明
1)功能:实现书籍翻页效果
2)使用插件:turn.js

2、示例
1)前提工作
– 需要提前计算数据总页数,提前生成需要的页数
– 初始化翻书插件
2)实践
html代码片段示例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻书title>
    <meta name="description" content="翻书">
    <meta name="keywords" content="翻书">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
   
    <style>
        .btn {
          background: none;
          border: none;
          line-height: normal;
          cursor: pointer;
          outline: none;
          font-family: "Microsoft Yahei"; }
        #magazine .turn-page{
            background-color:#ccc;
            background-size:100% 100%;
        }
        main{
            overflow: hidden;
            background: url("img/bg2.png") no-repeat;
            -webkit-justify-content: space-between;
            background-size: cover;
        }
        .pagination {
            display: -webkit-flex;
            -webkit-justify-content: space-between;
            -webkit-align-items: center;
            margin-top: 5%;
            padding: 0 5%; }
        .pagination .btn {
            padding: 5px 10px;
            color:#000;
            font-size: 14px; }
    style>
head>
<body>
    <div class="book">
        <div class="main">
            <div id="magazine">
                <div style="background-image:url(img/book3.png);">
                    <p style="font-size:30px;margin: 150px;">首页p>
                div>

            div>
        div>
        <div class="pagination" id="pagebut">
            <button class="btn prev" style="visibility:hidden">上一页button>
            <button class="btn next">下一页button>
        div>
        <div class="pagination" id="gobackbtn" style="display: none;">

        div>
    div>
    <input type="hidden" value="7" id="page_nums" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">script>
    <script src="js/turn.min.js">script>
    <script src="js/js.js">script>
body>
html>

js代码片段

$(function(){
    //------------- 翻书init start ------------
    //  book 初始化
    $('#magazine').turn({
        pages: $('#page_nums').val(),//总页数
        display: 'single',
        acceleration: true,
        gradients: !$.isTouch,
        width:  $(window).width()*0.9,
        height: $(window).height()*0.834,
        elevation:50,/*
            turnCorners: "bl,br",*/
        when: {
            turning: function(e, page, view) {
                $("#magazine").turn("disable");
                // Gets the range of pages that the book needs right now
                var range = $(this).turn('range', page);
                // Check if each page is within the book
                for (page = range[0]; page<=range[1]; page++)
                    addPage(page, $(this));
            },
            turned: function(e, page) {
                $('#page-number').val(page);
                if(page==1){
                    $('.prev').css('visibility','hidden');
                }
                if(page >= 2){
                    var page = $("#magazine").turn('page');
                    //显示 上一页按钮显示
                    $('.prev').css('visibility','visible');
                    $('.next').css('visibility','visible');
                }
                if(page == $("#magazine").turn('pages')-1){
                    //最后一页 下一页按钮消失
                    $('.next').css('visibility','hidden');
                }
            }
        }
    });

    //  上下翻页
    $('.next').on("click",function () {
        $('#magazine').turn("next");
        var page = $("#magazine").turn('page');
        if(page == 2){
            //显示 上一页按钮显示
            $('.prev').css('visibility','visible')
        } else if(page == $("#magazine").turn('pages')-1){
            //最后一页 下一页按钮消失
            $('.next').css('visibility','hidden')
        }
    });
    $('.prev').on("click",function () {
        $('#magazine').turn("previous");
        var page = $("#magazine").turn('page');
        if(page == 1){
            //首页上一页 按钮消失
            $('.prev').css('visibility','hidden')
        } else if(page == $("#magazine").turn('pages')-2){
            //倒数第二页 显示 下一页 按钮
            $('.next').css('visibility','visible')
        }
    });
    //------------- 翻书init end --------------
});

// Adds the pages that the book will need
function addPage(page, book)
{
    var pages =$('#page_nums').val();//总页数
    //  First check if the page is already in the book
    if (!book.turn('hasPage', page)) {
        // Create an element for this page
        var element = $('
', {'class': 'page '+((page%2==0) ? 'odd' : 'even'), 'id': 'page-'+page}).html(''); // If not then add the page book.turn('addPage', element, page); // Let's assum that the data is comming from the server and the request takes 1s. setTimeout(function(){ var sHtml = '

Data for page '+page+'

点击进入详情页
'
; element.html(sHtml); }, 1000); } } //detail page function showDetail() { //详情页数据 var sHtml = '
welcome to detail page *^_^*
'
; //获取 当前页 页码 var currentPage = $("#magazine").turn('page'); //获取 最后一页 页码,作为详情页 var iDetailIndex = $("#magazine").turn('pages'); iDetailIndex = parseInt(iDetailIndex); //分类标签按钮展示处理 $('#pagebut').hide(); $("#gobackbtn").html(''); $('#gobackbtn').show(); //新增并跳转到详情页 $('#magazine').turn("addPage", sHtml, iDetailIndex); $('#magazine').turn("page", iDetailIndex); } //详情页返回列表页 function gobacklist(listPage) { //返回list $('#magazine').turn('page', listPage); //处理按钮展示 if ($('#pagebut').css('display', 'none')) { $("#gobackbtn").html(''); $('#gobackbtn').hide(); $('#pagebut').show(); } }

3、效果
最终效果如图
js翻页效果实现_第1张图片

注:
1)jquery插件库:http://www.jq22.com/
2)使用插件(turn.js)官网说明:http://www.turnjs.com/docs/Main_Page
3)插件示例代码:http://www.jq22.com/jquery-info2534

你可能感兴趣的:(jquery,微信开发)