翻书效果的js插件

Turn.js

官网链接：http://www.turnjs.com/

简介

​ 官网对于这个js插件的介绍是这个样子的：

Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5.

​ 大概意思是说这个插件可以让你的内容看起来像一本真的书或者杂志。turn.js是一款非常适合基于HTML5做的杂志、书籍和产品目录的插件。

​ 同时，turn.js也支持触摸屏设备。

特点

  • 可以支持多种移动端设备
  • 简单而强大的API
  • 允许使用Ajax请求来动态的加载页面
  • 纯净的HTML5和CSS3内容
  • 有两种过渡的效果
  • 可以使用trun.html4.js来使它可以在老的浏览器的工作（IE8）

注意：需要引入JQuery1.3及以上的版本*

Hello Turn.js

image-20210806204433026

1、将turn.js放在工作目录并引入，引入JQuery.js

2、愉快的敲代码

这里官网给的例子非常的简单，但是一顿复制粘贴发现，效果虽然是实现了，文字全都是重叠的，而且也没有像官网例子一样美观。

我们增加一些css样式

body {
    background-color: honeydew;
}
.text {
    background-color: #fff;
}
.hard {
    background-color: #ccc;
}

​ body增加一个背景颜色主要是为了看清效果，别无他用！

官网的html部分

<div id="flipbook">
    <div class="hard"> Turn.js </div>
    <div class="hard"></div>
    <div class="text"> Page 1 </div>
    <div class="text"> Page 2 </div>
    <div class="text"> Page 3 </div>
    <div class="text"> Page 4 </div>
    <div class="hard"></div>
    <div class="hard"></div>
</div>

​ 这里我多增添了一个text的class属性，主要是为了添加样式。

JavaScript部分

<script src="../static/js/jquery.js"></script>
<script src="../static/js/turn.js"></script>
<script type="text/javascript">
    $("#flipbook").turn({
         400,
        height: 300,
        autoCenter: true
    });
</script>

​ 一定引入JQuery.js！！！

​ width和height属性都很好理解，autoCenter属性又是什么呢？

​ 通过测试得知，autoCenter以字面意思为自动居中。即 当autoCenter=true时，无论书打开或关闭，都以一条线为中线；当autoCenter=false时，书打开和关闭不会自动居中，以不同的两条线分别为中线。

选项

1. acceleration

设置硬件加速模式。

当需要使用触摸设备时，此值必须为真。

acceleration: true

2. direction

指定flipbook打开时从左到右还是从右到左（古代书籍打开方式）

  • 从左到右 ltr 默认值
  • 从右到左 rtl
// 从左到右
direction: 'ltr'
// 从右到左
direction: 'rtl'

3.duration

设置翻页的速度，以毫秒为单位

如果设置为0，翻页的效果就会十分的生硬

duration: 1000

4. gradients

翻页过程中显示渐变和阴影

5. width height

页面的宽度和高度

 300,
height: 400

6. elevation

转换期间页面的高度

7. page

初始化页面个数

这个是设置初始化时加载几个页面的内容

8. pages

设置任意数量的页面。

如果页面的数量大于div元素个数，可以使用addPage方法动态地添加这些页面。

9. when

时间监听器

键必须在事件列表中使用。

$("#flipbook").turn({
    when: {
        turning: function(e, page, view){
            console.log('e =>' + e);
            console.log('page => ' + page);
            console.log('view => ' + view);
        },
        turned: function(e, page) {
            console.log('e =>' + e);
            console.log('page => ' + page);
        }
    }
});

​ 当页面翻转时调用turned的方法

属性

1. animating

当折叠的页面显示时，返回true。也就是说，如果页面正在进行动画效果的时候会返回true。

$('#flipbook').turn('animating')

将duration的值设置大一点，可以对其返回值测试。

image-20210807125734143

2. direction

返回当前翻页的方向

$('#flipbook').turn('direction')

image-20210807130435041

3. display

获取当前显示的是单页还是双页

$('#flipbook').turn('display')

image-20210807130604262

4. pages

获取总共有多少页。

如果在选项中设置了pages的页数，就会返回这个数字。

$("#flipbook").turn("pages")

image-20210807130841061

5. size

获取flipbook的高宽.

会返回一个对象，包含width和height

$("#flipbook").turn("size")

image-20210807130959406

方法

1. addPage

添加页面

let element = $('<div class="text"/>').html("这是使用addPage增加的页面")
// 将element页面添加到第7页
$('#flipbook').turn('addPage', element, 7)

2. destroy

删除所有页面

$("#flipbook").turn("destroy").remove()

3. direction

设置flipbook的打开方向

$('#flipbook').turn('direction', 'ltr')
$('#flipbook').turn('direction', 'rtl')

4. display

设置单页还是双页

$('#flipbook').turn('display', 'single')

5. next

向后翻一页

$('#flipbook').turn('next')
// 向后翻两页
$('#flipbook').turn('next').turn('next')

6. option

更改选项的值

$('#flipbook').turn('options', {
    display: 'single',
    duration: 1000
})

7.page

跳到指定的页面

$('#flipbook').trun('page', 10)

8.previous

转到前面的视图，也就是向前翻一页。

$('#flipbook').turn('previous')
$('#flipbook').turn('previous').turn('previous')

9.removepage

删除指定的页面

$('#flipbook').turn('removepage', 10)

事件

end

// end
$('#flipbook').bind("end", function(event, pageObject, turned) {
    console.log('-----------------end事件触发了-----------------');
    console.log('event => ' + event);
    console.log('pageObject => ' + pageObject);
    console.log('turned => ' + turned);
})

image-20210807150230500

一次翻页动作会触发三次end事件

first

翻到第一页时会触发

// first
$('#flipbook').bind('first', function(event) {
    console.log('-----------------first事件触发了-----------------')
    console.log(event);
})

last

翻到最后一页时会触发

// last
$('#flipbook').bind('last', function(event) {
    console.log('-----------------last事件触发了-----------------')
    console.log(event);
})

missing

start

在页面的折叠动画效果开始时触发该动画。换句话说，在显示折叠起来的页面之前触发该动画。

$("#flipbook").bind("start", function(event, pageObject, corner) {
  if (corner=="tl" || corner=="tr") {
    event.preventDefault();
  }
});

turning

翻页之前被启动

$('#flipbook').bind('turning', function(event, page, view) {
    
})

turned

翻页完成之后启动

$('#flipbook').bind('turned', function(event, page, view) {
    
})

zooming

当缩放改变时触发此事件

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Gazikel/p/15112776.html