当前位置: 首页 > news >正文

turnjs图册翻书效果

npm install https://github.com/igghera/turn.js.git
//或者
npm install turn.js //

import $ from "jquery"; //记得引入jquery
import 'turn.js'; // 引入 Turn.js

import turn from "@/utils/turn.min.js";// 引入 Turn.js
initBook(length) {
      var that = this;
      that.$nextTick(() => {
        const book = that.$refs.book;

        that.totalPages = length;

        $(book).turn({
          acceleration: true,
          display: "double",
          duration: 800,
          page: 2,
          gradients: true,
          pages: $(book).children().length,
          turnCorners: "bl,br,tl,tr,l,r",
          elevation: 300,
          autoCenter: true,
          peel: "tr",
          width: 1272,
          height: 896,
          when: {
            turned: (e, page) => {
              that.currentPage = page;
            },
          },
        });

      });
    },

{
  "name": "turn.js",
  "version": "1.0.5",
  "description": "Web page flipper",
  "main": "index.js",
  "repository": "https://github.com/igghera/turn.js.git",
  "author": "Andrea Gherardi <a.gherardi@cantierecreativo.net>",
  "license": "MIT",
  "dependencies": {
    "jquery": "1.12.0"
  }
}
 

相关文章:

  • 数据仓库是什么,跟数据集成有什么关系
  • Web3 时代数据保护的关键挑战与应对策略
  • PostgreSQL 触发器
  • 电机控制常见面试问题(十四)
  • gralloc1_perform具体在干什么
  • 从两指到三指:Robotiq机器人自适应夹持器技术解析
  • MySQL InnoDB 事务隔离级别和锁
  • git 命令回退版本
  • nodejs - 基础知识
  • Plant Simulation中怎么更改机器人3D模型
  • 精挑20题:MySQL 8.0高频面试题深度解析——掌握核心知识点、新特性和优化技巧
  • WPF 布局中的共性尺寸组(Shared Size Group)
  • Git远程拉取和推送配置
  • Docker Compose部署MantisBT
  • 在本地跑通spark环境
  • 网络防火墙(Firewall)、Web防火墙(WAF)、入侵检测系统(IDS)、入侵防御系统(IPS)对比总结
  • webrtc3A算法
  • Python数据可视化工具:六西格玛及其基础工具概览
  • 进程管理笔记1-进程线程基础知识
  • R语言绘图:小提琴图
  • 揭秘拜登退选内幕新书引争议,“垃圾信息在四处传播”?
  • 三件珍贵标本开箱!中国恐龙大展5月26日在沪开幕,明星标本汇聚一堂
  • 江苏疾控:下设部门无“病毒研究所”,常荣山非本单位工作人员
  • 山东茌平民企巨头实控人省外再出手:斥资16亿拿下山西一宗探矿权
  • 广西桂林、百色、河池等地表态:全力配合中央对蓝天立的审查调查
  • 全国多家健身房女性月卡延长,补足因月经期耽误的健身时间