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

下载

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

官网

文档

接口文档

开始

构造方法

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

可配置项

$('.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) {
    
     // 翻页后触发
				
	        }
    }   
});

方法

语法

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

• direction

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

• addPage

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

• dispaly

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

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

• disable

设置页面禁用

• destroy

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

• removePage

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

• hasPage

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

• next

//翻到下一页
$('.flipbook').turn('next');

• previous

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

• is

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

• page

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

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

• pages

//设置总页数
$('.flipbook').turn('pages' , 2);

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

• peel

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

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

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

• size

//设置大小
//两个参数 1,width 2,height
$('.flipbook').turn('size', 922 ,600);

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

• stop

//停止动画效果
$('.flipbook').turn('page', 3).turn('stop'); //没有翻页动画

• zoom

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

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

事件

两种方式添加事件

 - turn()构造方法里面的 when: {
    
    }
 - bind()

• start

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

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

• end

//页面上的任何一个动作结束触发
when: {
    
    
    end: function (event, page, pageObj) {
    
    
        console.log('end');
    }

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

• first

//当在第一页时触发
when: {
    
    
    first: function (event) {
    
    
        console.log('first page');
    }

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

• last

//当在最后一页时触发
when: {
    
    
    last: function (event) {
    
    
        console.log('last page');
    }

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

• 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);
});

• 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');
});

• zooming

//缩放触发
//event
//newFactor 缩放的倍数
//current 缩放前的倍数
when: {
    
    
    turned: function (event, newFactor, current) {
    
    
        console.log(newFactor, current);
    }

案例

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

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;
}

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>
</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/[email protected]"></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,
            acceleration: true, //move
          });
          $('.flipbook').turn("peel", "tr"); // 在右上角显示角
        }
      },
    })
  </script>
</body>
</html>

最终效果如下

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