当前位置: 首页 > 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"
  }
}
 

http://www.dtcms.com/a/80994.html

相关文章:

  • 数据仓库是什么,跟数据集成有什么关系
  • 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语言绘图:小提琴图
  • 在Mac上一键安装Mysql(解决所有安装问题)
  • sql-DDL
  • 《C语言中的“吃豆人”:%*c 的奇妙冒险》
  • Lineageos 22.1(Android 15)实现负一屏
  • CSS 选择器详解:类型、用法与示例
  • 微博ip属地不发微博会不会变
  • Oracle 数据迁移至 GaussDB 注意事项
  • Gone v2 Tracer 组件-给微服务提供统一的traceID
  • 科技资讯杂志科技资讯编辑部科技资讯杂志社2025年第2期目录
  • 软考笔记——程序设计语言基础知识