devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端Vue书籍翻页功能利用turn.js来完成以及知识点(源码)

作者：Gausst松鼠会 | 2024-02-19 23:05:31

赞

踩

前端vue书籍翻页功能利用turn.js来完成以及知识点

目录

下载

下载完里面有源码,好几种翻页效果,很不错~

官网

文档

接口文档

开始

构造方法

$('#flipbook').turn([options]);

  • 1
可配置项
$('.flipbook').turn({
    width: 922,         //宽度

    height: 600,        //高度

    acceleration: true, //硬件加速, 默认true, 如果是触摸设备设置为true

    autoCenter: false,  //自动居中, 默认false

    display: 'double',  //单页显示/双页显示  single/double

    duration: 1000,     //翻页速度(毫秒), 默认600ms

    gradients: true,    //翻页时的阴影渐变, 默认true

    inclination: 0,

    page: 1,            //设置当前显示第几页

    //pages: 4,         //总页数

    when: {         //监听事件
			turning: function (e, page, view) {// 翻页前触发

			},
			turned: function (e, page) { // 翻页后触发
				
	        }
    }   
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

方法

语法
$('.flipbook').turn('方法名'[, 参数],);   
//不需要turn()返回值的时候，可以连这写
$('.flipbook').turn('方法名'[, 参数],).turn('方法');

  • 1
  • 2
  • 3
  • direction
//设置图书翻页方向
$("#flipbook").turn("direction", "rtl");

  • 1
  • 2
  • addPage
 //增加一页
//两个参数 1,jquery对象（页面） 2,页号（非必填,默认是往最后一页后面加一页）
$('.flipbook').turn('addPage', $('<div/>'), 3);

  • 1
  • 2
  • 3
  • dispaly
//一个参数 single/double 单页/双页 显示
$('.flipbook').turn('display', 'double');

//获取display属性值
$('.flipbook').turn('display');  //返回single or double


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • disable
设置页面禁用

  • 1
  • destroy
//移除所有页
$('.flipbook').turn('destroy');

  • 1
  • 2
  • removePage
//移除指定页
//一个参数 页号
$('.flipbook').turn('removePage' , 2); //移除第二页

  • 1
  • 2
  • 3
  • hasPage
//指定页是否存在
//一个参数 页号
$('.flipbook').turn('hasPage' , 1); //如果该页存在，返回true

  • 1
  • 2
  • 3
  • next
//翻到下一页
$('.flipbook').turn('next');

  • 1
  • 2
  • previous
//翻到上一页
$('.flipbook').turn('previous');

  • 1
  • 2
  • is
//是否存在turn()实例
$('.flipbook').turn('is'); //存在返回true

  • 1
  • 2
  • page
//翻到指定页
$('.flipbook').turn('page' , 2); //翻到第二页

//返回当前显示第几页
$('.flipbook').turn('page');

  • 1
  • 2
  • 3
  • 4
  • 5
  • pages
//设置总页数
$('.flipbook').turn('pages' , 2);

//返回总页数
$('.flipbook').turn('pages');

  • 1
  • 2
  • 3
  • 4
  • 5
  • peel
//展示从哪个角翻页
//一个参数   tl-左上角 bl-左下角 tr-右上角 br-右下角 l-左 r-右
$('.flipbook').turn('peel' , 'br');

//不显示
$('.flipbook').turn('peel' , false);

// r和l在设置class=hard时才有效果

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • size
//设置大小
//两个参数 1,width 2,height
$('.flipbook').turn('size', 922 ,600);

//返回纸的大小{width: xx, height:xx}
$('.flipbook').turn('size'); 

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • stop
//停止动画效果
$('.flipbook').turn('page', 3).turn('stop'); //没有翻页动画

  • 1
  • 2
  • zoom
//缩放
//两个参数 1,缩放倍数 2, 缩放动画持续事件（感觉没起作用啊）
$('.flipbook').turn('zoom', 0.6, 500);

//返回缩放倍数，默认1
$('.flipbook').turn('zoom'); 

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

事件

两种方式添加事件
 - turn()构造方法里面的 when: {}
 - bind()

  • 1
  • 2
  • start
//页面上的任何一个动作开始触发
when: {
    start: function (event, page, pageObj) {
        console.log('start');
    }

$('.flipbook').bind('start', function (event, page, pageObj) {
    console.log('start');
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • end
//页面上的任何一个动作结束触发
when: {
    end: function (event, page, pageObj) {
        console.log('end');
    }

$('.flipbook').bind('end', function (event, page, pageObj) {
    console.log('end');
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • first
//当在第一页时触发
when: {
    first: function (event) {
        console.log('first page');
    }

$('.flipbook').bind('first', function (event) {
    console.log('first page');
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • last
//当在最后一页时触发
when: {
    last: function (event) {
        console.log('last page');
    }

$('.flipbook').bind('last', function (event) {
    console.log('last page');
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • turning
//翻页前触发
//event
//page $('.flipbook').turn('page') 
//view $('.flipbook').turn('view'); 
when: {
    turning: function (event, page, view) {
        console.log('turning', page, view); //page 和 view 显示的是当前展示的页号
    }

$('.flipbook').bind('turning', function (event, page, view) {
    console.log('turning', page, view);
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • turned
//翻页后触发
//event
//page $('.flipbook').turn('page')
//view $('.flipbook').turn('view'); 
when: {
    turned: function (event, page, view) {
        console.log('turned');
    }

$('.flipbook').bind('turned', function (event, page, view) {
    console.log('turned');
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • zooming
//缩放触发
//event
//newFactor 缩放的倍数
//current 缩放前的倍数
when: {
    zooming: function (event, newFactor, current) {
        console.log(newFactor, current);
    }
$('.flipbook').bind('zooming', function (event, page, view) {
    console.log('zooming');
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

自动翻页loading加载功能

可以当翻书加载loading加载效果~

  <script>
    // 自动翻页功能
    var way = 1;
    setInterval(function () {
      if (way == 1) {
        $(".flipbook").turn("next");
        if ($(".flipbook").turn("page") == $(".flipbook").turn("pages")) {
          way = 2;
          $(".flipbook").turn("options", {
            turnCorners: "tl,tr"
          });
        }
      } else {
        $(".flipbook").turn("previous");

        if ($(".flipbook").turn("page") == 1) {
          way = 1;
          $(".flipbook").turn("options", {
            turnCorners: "bl,br"
          });
        }
      }
    }, 1000);
    // 定义配置
    function loadApp() {
      // Create the flipbook
      $('.flipbook').turn({
        // Width
        width: 922,
        // Height
        height: 600,
        // Elevation
        elevation: 50,
        // Enable gradients
        gradients: true,
        // Auto center this flipbook
        autoCenter: true,
        acceleration: true, //move
      });
      $(".flipbook").turn("peel", "tr"); // 在右上角显示角
    }
    // Load the HTML4 version if there's not CSS transform
    yepnope({
      test: Modernizr.csstransforms,
      yep: ['./js/turn.js'],
      nope: ['./js/turn.html4.min.js'],
      both: ['./css/basic.css'],
      complete: loadApp
    });
  </script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50

案例

项目目录如下图,源码一一对应上

在这里插入图片描述

CSS

basic.css源码如下
/* Basic sample */

body{
	overflow:hidden;
	background-color:#fcfcfc;
	margin:0;
	padding:0;
}

.flipbook-viewport{
	overflow:hidden;
	width:100%;
	height:100%;
}

.flipbook-viewport .container{
	position:absolute;
	/* top:50%;
	left:50%;
	margin:auto; */
	/* margin-top: 200px;
	margin-left: 500px; */
}

.flipbook-viewport .flipbook{
	width:922px;
	height:600px;
	/* left:-461px;
	top:-300px; */
}

.flipbook-viewport .page{
	width:461px;
	height:600px;
	background-color:white;
	background-repeat:no-repeat;
	background-size:100% 100%;
}

.flipbook .page{
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.flipbook-viewport .page img{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin:0;
}

.flipbook-viewport .shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 20px #ccc;
	-moz-box-shadow:0 0 20px #ccc;
	-o-box-shadow:0 0 20px #ccc;
	-ms-box-shadow:0 0 20px #ccc;
	box-shadow:0 0 20px #ccc;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69

JS里面代码太多了,直接官网下载

下载完压缩turnjs4,打开找到extras,再打开,就可以找到需要的js文件了

index.html源码如下

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script type="text/javascript" src="./js/jquery.min.1.7.js"></script>
  <script type="text/javascript" src="./js/modernizr.2.5.3.min.js"></script>
</head>
<style>
    /* 样式加一下,防止翻页字体抖动 */
	.container {
      min-height: auto;
      min-width: auto;
      box-sizing: border-box !important;
    }

    .flipbook {
      -webkit-backface-visibility: hidden !important;
      backface-visibility: hidden !important;
      transform: translate3d(0, 0, 0) !important;
      box-sizing: border-box !important;
    }

    .page-wrapper {
      transform: translate3d(0, 0, 0) !important;
    }


    .flipbook {
      min-height: auto !important;
      border: 1px solid transparent !important;
      box-sizing: border-box;
    }
</style>

<body>
  <div id="app">
    <div class="flipbook-viewport">
      <div class="container">
        <div class="flipbook">
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page1.jpg);"
            class="instshow">
            1111111111111111111111</div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page2.jpg);">
            22222222222222222</div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page3.jpg);">
            3333333333333333333333</div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page1.jpg);">
            44444444444444444444444444</div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page2.jpg);">
            555555555555555555555</div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page3.jpg);">
            66666666666666666666</div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page1.jpg);">
            77777777777777777777777</div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page2.jpg);">
            8888888888888888888888</div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page3.jpg);">
            999999999999999999999</div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page1.jpg);">
            101010100100010100010110</div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page2.jpg);">
            11111111111111111</div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page3.jpg);">
            12121212221212121212</div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
  <!-- 我用的引入vue文件,上面为线上引入 -->
  <script src="./js/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {},
      mounted() {
        yepnope({
          test: Modernizr.csstransforms,
          yep: ['./js/turn.js'],
          nope: ['./js/turn.html4.min.js'],
          both: ['./css/basic.css'],
          complete: this.loadApp
        });
      },
      methods: {
        loadApp() {
          $('.flipbook').turn({
            width: 922,
            height: 600,
            elevation: 50,
            gradients: true,	// 关闭阴影，看自己需求，也可以打开
            autoCenter: true,	// true居中
            acceleration: false, //move  关闭移动设备,pc端移入的时候，会有模糊字体
          });
          $('.flipbook').turn("peel", "tr"); // 在右上角显示角
        }
      },
    })
  </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103

最终效果如下

在这里插入图片描述

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/117226
推荐阅读

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。