turnjs实现翻书效果

需求：要做一个效果，类似于阅读器上的翻书效果。

咱们要实现这个需求就需要使用turnjs这个插件，他的官网是turnjs官网。
进入官网后可以点击在这里插入图片描述这个按钮去下载官网的demo。

这个插件依赖于jQuery，所以你的先安装jQuery.

npm install jquery --save

把下载下来的demo里的turnjs放到utils/turn.js这里.
在turnjs里修改代码

import jQuery from "jquery";
export default (function($)

需要使用的地方

import $ from 'jquery'
import turn from '@/utils/turn.js'

配置参数

$("#book").turn({
    //启用硬件加速,移动端有效
    acceleration: false,
    //显示：single=单页，double=双页，默认双页
    display: "double",
    // 翻页撒开鼠标，页面的延迟
    duration: 800,
    // 默认显示第几页
    page: 1,
    // 折叠处的光泽渐变，主要体现翻页的立体感、真实感
    gradients: true,
    // 中心翻取决于有多少页面可见 true or false
    autoCenter: true,
    // 设置可翻页的页角(都试过了，乱写 4个角都能出发卷起)， bl,br   tl,tr   bl,tr
    turnCorners: "bl,br",
    //页面高度
    height: this.turnPage.height,
    //翻书范围宽度，总宽度
    width: this.turnPage.width,
    when: {
        //监听事件
        turning: function (e, page, view) {
            console.log("翻页前触发");
            console.log(e, page, view);
	          if (page == 2) {     // 翻到最后一页销毁插件
	            $("#book").turn("destroy").remove();
	            e.preventDefault();
	          }
        },
        turned: function (e, page) {
            console.log("翻页后触发");
            console.log(e, page);
            // 翻页后触发
            console.log(page);
        },
    },
});

在这里插入图片描述