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

目录

    • 下载
    • 文档
    • 开始
      • 构造方法
        • 可配置项
      • 方法
        • 语法
      • 事件
        • 两种方式添加事件
    • 案例
      • CSS
        • basic.css源码如下
      • JS里面代码太多了,直接官网下载
      • index.html源码如下
    • 最终效果如下

下载

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

官网

文档

接口文档

开始

构造方法

$('#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', $('
'), 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: {
    zooming: function (event, newFactor, current) {
        console.log(newFactor, current);
    }
$('.flipbook').bind('zooming', function (event, page, view) {
    console.log('zooming');
});

案例

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

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

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">
            1111111111111111111111div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page2.jpg);">
            22222222222222222div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page3.jpg);">
            3333333333333333333333div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page1.jpg);">
            44444444444444444444444444div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page2.jpg);">
            555555555555555555555div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page3.jpg);">
            66666666666666666666div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page1.jpg);">
            77777777777777777777777div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page2.jpg);">
            8888888888888888888888div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page3.jpg);">
            999999999999999999999div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page1.jpg);">
            101010100100010100010110div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page2.jpg);">
            11111111111111111div>
          <div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page3.jpg);">
            12121212221212121212div>
        div>
      div>
    div>
  div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]">script>
  
  <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>

最终效果如下

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

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

你可能感兴趣的:(Css,vue,html,javascript,前端,vue.js,turn.js书籍翻页,turnjs书籍翻页)