turnjs实现翻书效果

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

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

  1. 这个插件依赖于jQuery,所以你的先安装jQuery.
npm install jquery --save
  1. 把下载下来的demo里的turnjs放到utils/turn.js这里.
  2. turnjs里修改代码
import jQuery from "jquery";
export default (function($) 
  1. 需要使用的地方
import $ from 'jquery'
import turn from '@/utils/turn.js'
  1. 配置参数
$("#book").turn({//启用硬件加速,移动端有效acceleration: false,//显示:single=单页,double=双页,默认双页display: "double",// 翻页撒开鼠标,页面的延迟duration: 800,// 默认显示第几页page: 1,// 折叠处的光泽渐变,主要体现翻页的立体感、真实感gradients: true,// 中心翻取决于有多少页面可见 true or falseautoCenter: true,// 设置可翻页的页角(都试过了,乱写 4个角都能出发卷起), bl,br   tl,tr   bl,trturnCorners: "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);},},
});

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/236280.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux-v4l2框架

框架图 从上图不难看出,v4l2_device作为顶层管理者,一方面通过嵌入到一个video_device中,暴露video设备节点给用户空间进行控制;另一方面,video_device内部会创建一个media_entity作为在media controller中的抽象体&a…

浏览器深色模式

1、Edge强制深色模式 1、先在edge里设定成深色模式 设置浏览器中的深色设置 但这种方式设置后很多网站仍是白色的背景 2、实验室设置强制深色 网址栏 输入 edge://flags搜索 dark 选择 enabled 重启 2、Chrome强制深色模式 浏览器输入 Chrome深色设置 chrome://flags/#…

波动,热传导,扩散方程建立

数学物理方程是从自然科学的各个领域和工程技术领域中导出的偏微分方程和积分方程.在这些以偏微分方程为基础的数学模型中,二阶线性偏微分方程中的三个典型方程与定解条件的建立、解法及其应用.描述振动和波动过程的波动方程、描述输运过程的热传导&…

vivado Revision Control

2020.2 只需要git 管理 prj.xpr 和 prj.srcs/ https://china.xilinx.com/video/hardware/ip-revision-control.html Using Vivado Design Suite with Revision Co

figma导入psd实战笔记

最近发现figma特别好用 并且插件生态特别庞大 如 将设计图转成vue react react-native 项目 flutter 项目 最重要的是 可以集成vscode 插件使用 使用蓝湖久了 感觉蓝湖 有写繁琐 同事扩展功能有限 Figma: The Collaborative Interface Design ToolFigma is the leading collabo…

WorkPlus AI助理为企业提供智能客服的机器人解决方案

在数字化时代,企业面临着客户服务的重要挑战。AI客服机器人成为了提升客户体验和提高工作效率的关键工具。作为一款优秀的AI助理,WorkPlus AI助理以其智能化的特点和卓越的功能,为企业提供了全新的客服机器人解决方案。 为什么选择WorkPlus A…

使用Web自动化测试工具显著好处

随着互联网技术的飞速发展,Web应用程序在企业中的重要性不断上升。为了确保Web应用程序的质量和稳定性,许多企业转向了Web自动化测试工具。下面是使用Web自动化测试工具的一些显著好处: 1. 提高测试覆盖率 Web自动化测试工具可以模拟用户与We…

【基础工具篇使用】ADB 的安装和使用

文章目录 ADB的命令安装ADB 命令使用查看帮助 ——adb help查看连接设备 ADB的命令安装 ADB 命令的全称为“Android Debug Bridge”,从英文中看出主要是用作安卓的调试工具。ADB 命令在嵌入式开发中越来越常用了 在 Windows 上按“win”“R”组合件打开运行, 输入 …

多语言生成式语言模型用于零样本跨语言事件论证提取(ACL2023)

1、写作动机: 经过预训练的生成式语言模型更好地捕捉实体之间的结构和依赖关系,因为模板提供了额外的声明性信息。先前工作中模板的设计是依赖于语言的,这使得很难将其扩展到零样本跨语言转移设置。 2、主要贡献: 作者提出了一…

逆变器简述

一般家用电器,像微波炉,电饭煲等都是直接插墙壁上的电就可以工作,所以这些家用电器是使用我们市电AC220V的电压 但我们用到的手机,电瓶车以及新能源汽车都是需要充电器的,所以这些用电产品里面都是有电池的&#xff0…

AUTO SEG-LOSS SEARCHING METRIC SURROGATES FOR SEMANTIC SEGMENTATION

AUTO SEG-LOSS: 搜索度量替代语义分割 论文链接:https://arxiv.org/abs/2010.07930 项目链接:https://github.com/fundamentalvision/Auto-Seg-Loss ABSTRACT 设计合适的损失函数是训练深度网络的关键。特别是在语义分割领域,针对不同的场…

x-cmd pkg | tsx - Node.js 的直接替代品

目录 简介首次用户功能特点竞品和相关作品进一步探索 简介 tsx 代表 “TypeScript execute”,由 TypeScript 编写,内部使用由 Go 语言编写的 esbuild 核心二进制实现超快的 TypeScript 编译,旨在增强 Node.js 以无缝运行 TypeScript / ESM /…

软件测试|Selenium 元素不可交互异常ElementNotInteractableException问题分析与解决

简介 在使用 Selenium 进行 Web 自动化测试时,我们可能会遇到各种异常情况。其中之一就是 ElementNotInteractableException 异常,这通常意味着在尝试与页面元素交互时出现了问题。本文将详细介绍这个异常的原因、可能的解决方法,并提供示例…

A preview error may have occurred. Switch to the Log tab to view details.

记录一下当时刚开始学习鸿蒙开发犯的错误 UIAbility内页面间的跳转内容的时候会遇到页面无法跳转的问题 并伴随标题错误 我们跳转页面需要进行注册 路由表路径: entry > src > main > resources > base > profile > main_pages.json 或者是页面…

手敲Mybatis(16章)-一级缓存功能实现

1.实现目的 这一节的目的主要是实现SqlSession级别的缓存,也就是一级缓存,首先看下图一,用户可以通过设置来进行是否开启一级缓存,不设置的化默认开启一级缓存,localCacheScopeSESSION为要设置一级缓存,lo…

char常见问题之一【C语言】

引出 在所写的代码中: char ch0 "asd";报错:因为char类型的变量只能存储一个字符,不能存储字符串 char ch1a;正确 char ch2"a";报错:因为,虽然a是一个字符,但是用了双引号&#xf…

大语言模型下载,huggingface和modelscope加速

huggingface 下载模型 如果服务器翻墙了,不用租机器 如果服务器没翻墙,可以建议使用下面的方式 可以租一台**autodl**不用显卡的机器,一小时只有1毛钱,启动学术加速,然后下载,下载完之后,用scp…

2024年CES展会都有些啥?亮点集锦都在这里

💡 大家好,我是可夫小子,《小白玩转ChatGPT》专栏作者,关注AIGC、读书和自媒体。 CES在科技界是一场盛会,被誉为科技界的春晚,展会上前沿的技术、概念的产品吸引不少关注。2024年CES是在2023年大语言模型…

ChatGPT到底能做什么呢?

1、熟练掌握ChatGPT提示词技巧及各种应用方法,并成为工作中的助手。 2、通过案例掌握ChatGPT撰写、修改论文及工作报告,提供写作能力及优化工作 3、熟练掌握ChatGPT融合相关插件的应用,完成数据分析、编程以及深度学习等相关科研项目。 4、…

Ansible的切片特性与多机器选取

一、【概述】 本文介绍一下Ansible的多机器选取和切片特性,这个还是一个比较有用的技巧,可以快速选取仓库中我们需要的机器清单。 因为该特性可能与其他工具语法稍微有些不一样,时间长了会忘,值得记录一下 二、【具体说明】 1…