js翻页效果实现

最新推荐文章于 2024-05-16 01:59:34 发布
最新推荐文章于 2024-05-16 01:59:34 发布
阅读量1.4w 收藏 20
点赞数 2
分类专栏： jquery 微信开发 文章标签： 插件 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kirsten_z/article/details/78328577
版权

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

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

<!DOCTYPE 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" />
   <!--  <link rel="stylesheet" href="common.css"> -->
    <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 = $('<div />', {'class': 'page '+((page%2==0) ? 'odd' : 'even'), 'id': 'page-'+page}).html('<i class="loader"></i>');
        // 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 = '<div class="data" style="margin:100px;"><p>Data for page '+page+'</p><a href="javascript:void(0)" onclick="showDetail()">点击进入详情页</a></div>';
            element.html(sHtml);
        }, 1000);
    }
}

//detail page
function showDetail()
{
    //详情页数据
    var sHtml = '<div class="data" style="margin:80px;">welcome to detail page *^_^* </div>';
    //获取 当前页 页码
    var currentPage = $("#magazine").turn('page');
    //获取 最后一页 页码，作为详情页
    var iDetailIndex = $("#magazine").turn('pages');
    iDetailIndex = parseInt(iDetailIndex);
    //分类标签按钮展示处理
    $('#pagebut').hide();
    $("#gobackbtn").html('<button class="btn"></button><button class="btn" onclick="gobacklist(' + currentPage + ');">返回</button>');
    $('#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、效果
最终效果如图
这里写图片描述

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

kirsten_z
关注
  • 2
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现翻书特效
越陌度阡
08-11 3573
给大家分享一个用原生JS与CSS 3.0实现的翻书效果图，效果如下： 实现代码如下，欢迎大家复制粘贴。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>原生JS与CSS 3.0实现翻书特效</title>.........
js实现翻页
qq_36470686的博客
10-19 7000
效果图： 代码 ： &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"/&gt; &lt;style&gt; .first{ color:#666; display:inline-block; vertical-...
书本翻页效果源代码
01-01
运用HTML5制作出书本翻页的效果，可以根据自己的要求制作出不同样式和内容的书籍，方便大众的源代码。
【翻书特效 源代码---JS实现，附效果】
2401_84094725的博客
04-08 716
这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。你可能发现了我没有提到。
【翻书特效 源代码---JS实现，附效果】(1)
最新发布
2401_84091628的博客
05-16 350
right {LEFT: 50%.turn {.img {
JavaScript——滑动翻页功能（缓慢移动+无缝衔接）
我是我
07-28 3079
1. 需求+效果 展示 最近做开发时有这样一个需求，滚动播放列表，数据有限，当这些数据滚动播放结束后再重头开始，做完之后的效果是这样的 2. 实现代码(带标注) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
turn.js 翻书效果
sinat_35082096的博客
02-28 1087
turn.js 实现翻书动效，可适配手机端、pc端和ipad端
js 翻书翻页效果
weixin_35749545的博客
02-02 722
为了实现 JS 翻书翻页效果，可以使用 CSS3 动画和 JS 交互。首先定义好 HTML 结构，然后使用 CSS3 的 transition 和 transform 属性实现动画效果，最后通过 JS 监听用户的操作并对页面做出相应的改变。代码实现细节可以参考一些现有的开源项目或教程。 ...
Turn.js 实现翻书效果
余金兑人的技术角落
01-07 1070
turn.js前端翻页组件的使用
js模拟真实翻页的照片展示效果，超酷~
aizhen8632的博客
06-14 188
查看效果源码下载 前台部分代码代码<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lan...
js实现翻页效果
caiyl1314的专栏
03-10 4164
js实现翻页效果 转自：http://blog.csdn.net/redeagle_gbf/article/details/20044199 分页 @charset "utf-8"; * {margin:0px;padding:0px;border:0px;list-style-type:none;font-size:12
JS实现翻书效果图片浏览
09-29
JS实现翻书效果图片浏览 JS实现翻书效果图片浏览 JS实现翻书效果图片浏览
书页js效果
09-05
翻书效果
js实现翻书效果
05-08
js实现翻书效果
js翻页插件
02-04
纯JS编写的html翻页插件，使用简单，配置灵活，欢迎下载使用。
人性化翻页
06-27
非常漂亮的javascript翻页设计超人性化，特别喜欢
javascript移动端 电子书 翻页效果实现代码
10-16
主要介绍了javascript移动端 电子书 翻页效果实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JavaScript中transform实现数字翻页效果
10-20
在JavaScript中实现数字翻页效果，通常涉及到CSS3的transform属性和过渡效果。这个实例主要展示了如何通过CSS3的transform属性来创建一个3D翻页动画，使得数字在页面上呈现出翻页的效果，同时结合JavaScript控制翻页...
vue 结合 turnjs 实现翻页效果
05-04
在本教程中，我们将探讨如何将Vue.js与TurnJS结合，以实现一个优雅的翻页效果。 首先，我们需要确保Vue.js和TurnJS库已经安装。Vue.js可以通过npm进行安装： ```bash npm install vue ``` 而TurnJS通常通过CDN...
vue实现书本翻页效果
07-27
你可以使用Vue.js来实现书本翻页效果。下面是一个简单的示例： HTML模板： ```html <div id="app"> <div class="book" :class="{'open': isOpen}"> <div class="page front"> <h1>Front Cover</h1> </div> <div class="page back"> <h1>Back Cover</h1> </div> <div class="page content" :class="{'flip': isFlipping}"> <h1>Content</h1> </div> </div> <button @click="flipPage">Flip Page</button> </div> ``` CSS样式： ```css .book { width: 300px; height: 400px; perspective: 1000px; } .page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f2f2f2; border: 1px solid #ccc; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: transform 0.5s ease; } .front { z-index: 2; } .back { transform: rotateY(180deg); } .content { transform-origin: left center; } .open .content { transform: rotateY(-180deg); } .flip { animation: flipAnimation 0.5s forwards; } @keyframes flipAnimation { from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } } ``` Vue实例： ```javascript new Vue({ el: '#app', data: { isOpen: false, isFlipping: false }, methods: { flipPage() { this.isFlipping = true; setTimeout(() => { this.isOpen = !this.isOpen; this.isFlipping = false; }, 500); } } }); ``` 这个示例中，使用了CSS 3D转换和Vue的数据绑定来实现翻页效果。点击"Flip Page"按钮时，通过改变Vue实例中的isOpen和isFlipping属性来触发CSS动画和翻页效果。 注意：以上代码只是一个简单的示例，你可以根据自己的需求进行扩展和定制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值