记录--一个好用的轮子 turn.js 实现仿真翻书的效果

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

国际惯例,官网链接

官网传送门

Github地址

github上有几个demos例子,介绍了基础用法。

 我参考官网的例子,写了一个demo示例

安装

turn.js 依赖 jquery 库,所以需要先安装 jquery

npm install jquery --save

引入

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

下载 turn.js 文件,然后在组件中引入

import turn from "@/utils/turn.js";

vue.config.js 配置

const webpack = require('webpack');
module.exports = {lintOnSave: false,//配置webpack选项的内容configureWebpack: {plugins: [new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery",})]},}
或者,这样:
const webpack = require('webpack')
module.exports = {chainWebpack: config => {config.plugin('provide').use(webpack.ProvidePlugin, [{$: 'jquery',jquery: 'jquery',jQuery: 'jquery','window.jQuery': 'jquery'}])}
}

翻页方法,以及参数

  $("#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);// 翻页前触发console.log(page);},turned: function (e, page) {console.log("翻页后触发");console.log(e, page);// 翻页后触发console.log(page);},},});

上一页

$("#book").turn("previous");

下一页

$("#book").turn("next");

示例代码

完整代码,已经放到 Gitee 上面了,组件名为 TurnjsComponent

Gitee地址

本文转载于:

https://juejin.cn/post/7254443448564006967

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

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

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

相关文章

Redis Cluster 在Spring中遇到的问题

Redis集群配置可能会在运行时更改。可以添加新节点,可以更改特定插槽的主节点。还有可能因为master宕机或网络抖动等原因,引起了主从切换。 无法感知集群槽位变化 SpringBoot2.x 开始默认使用的 Redis 客户端由 Jedis 变成了 Lettuce,但是当…

2023.7月最新ORACLE考试通过|微思-ORACLE官方授权中心

微思-ORACLE官方授权培训中心 2022 ORACLE OCP考试战报https://blog.csdn.net/XMWS_IT/article/details/125866726?ops_request_misc%257B%2522request%255Fid%2522%253A%2522169089281916800182194373%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&r…

深度学习:BatchNorm、LayerNorm、InstanceNorm、GroupNorm和SwitchableNorm的理解

深度学习:BatchNorm、LayerNorm、InstanceNorm、GroupNorm和SwitchableNorm的理解 深度学习中的NormBatchNormLayerNormInstanceNormGroupNormSwitchableNorm 附录 深度学习中的Norm 在深度学习中会经常遇到BatchNorm、LayerNorm、InstanceNorm和GroupNorm&#xf…

振弦采集仪完整链条的岩土工程隧道安全监测

振弦采集仪完整链条的岩土工程隧道安全监测 隧道工程是一种特殊的地下工程,其建设过程及运行期间,都受到各种内外力的作用,如水压、地震、地质变形、交通荷载等,这些因素都会对隧道的安全性产生影响。因此,对隧道的安…

SpringBoot项目使用MyBatisX+Apifox IDEA 插件快速开发

今天跟大家介绍两个快速开发项目的插件。能大大提高开发效率。希望能帮助到大家。 1、MyBatisX 插件 MyBatis-Plus为我们提供了强大的mapper和service模板,能够大大的提高开发效率。但是在真正开发过程中,MyBatis-Plus并不能为我们解决所有问题&#xf…

AR开发平台 | 探索AR技术在建筑设计中的创新应用与挑战

随着AR技术的不断发展和普及,越来越多的建筑师开始探索AR技术在建筑设计中的应用。AR(增强现实)技术可以通过将虚拟信息叠加到现实场景中,为设计师提供更加直观、真实的建筑可视化效果,同时也可以为用户带来更加沉浸式的体验。 AR开发平台广…

Docker Compose 安装与使用(常用指令)

一、简介 Docker Compose 是一个编排多容器分布式部署的工具,提供命令集管理容器化应用的完整开发周期,包括服务构建、启动和停止。使用步骤:1. 利用 Dockerfile 定义运行环境镜像 2. 使用 docker-compose.yml 家义组成应用的各服务 3. 运行 …

IO进程线程day5(2023.8.2)

一、Xmind整理: 父进程会拷贝文件描述符表给子进程: 二、课上练习: 练习1:①从终端获取一个文件的路径以及名字。②若该文件是目录文件,则将该文件下的所有文件的属性显示到终端,类似ls -l该文件夹③若该文…

【Linux命令200例】touch用来创建新的文件或者修改已有文件

🏆作者简介,黑夜开发者,全栈领域新星创作者✌,阿里云社区专家博主,2023年6月csdn上海赛道top4。 🏆本文已收录于专栏:Linux命令大全。 🏆本专栏我们会通过具体的系统的命令讲解加上鲜…

前端视频播放技术概览

转眼间,2023 年已进入下半场,在这样一个时间节点下,长视频平台如爱奇艺、优酷、腾讯视频等,以及短视频平台如抖音、快手等,对大家来说早已是司空见惯的事物。然而,在我们追剧、刷弹幕的时候,很少…

电压放大器工作在什么状态

电压放大器是一种广泛应用于电子电路中的基本电路元件,其主要功能是将输入信号的电压放大到所需的输出电压幅值,并且保持信号的形状不变。在实际电路设计中,电压放大器的工作状态会受到多种因素的影响,比如输入信号的频率、放大倍…

iOS--runtime

什么是Runtime runtime是由C和C、汇编实现的一套API,为OC语言加入了面向对象、运行时的功能运行时(runtime)将数据类型的确定由编译时推迟到了运行时平时编写的OC代码,在程序运行过程中,最终会转换成runtime的C语言代…

爱尔眼科四川省区“同心博爱 光明工程”“西部健康公益行”炉霍站启动

8月1日,“同心博爱 光明工程”“西部健康公益行”炉霍站出征仪式在四川爱尔眼科医院隆重举行。 此次公益活动由民革成都市委会、中共锦江区委统战部指导,如意树爱心促进会主办,民革锦江区总支部、爱尔眼科四川省区支持,四川爱尔眼…

手把手教你从零开始搭建个人博客

随着技术的进步和用户需求的变化,个人博客的形式和内容一直在不停地演变。为了给读者提供更丰富、有趣的阅读体验,搭建个人博客的网站一直在寻找更好的优化方法。所以现在出现了一批功能更完善的个人博客搭建软件,今天looklook就以HelpLook为…

C++设计模式之适配器设计模式

文章目录 C适配器设计模式什么是适配器设计模式该模式有什么优缺点优点缺点 如何使用 C适配器设计模式 什么是适配器设计模式 适配器设计模式是一种行为型设计模式,它允许你将两个不兼容的接口组合在一起,使它们能够协同工作。 该模式有什么优缺点 优…

Activiity跳转startActivity源码分析Activity启动流程(下)

调用ActivityThread子类ClientTranslationHandler的scheduleTranslation 注意上图有个sendMessage的 接着会执行translacationExecutor的execute方法。 都会走cycleToPath方法 cycleToPath方法对应的performLifecycleSequence 调用Actvitiy各个生命周期。 然后是第二种情况&am…

设计模式行为型——命令模式

目录 什么是命令模式 命令模式的实现 命令模式角色 命令模式类图 命令模式举例 命令模式代码实现 命令模式的特点 优点 缺点 使用场景 注意事项 什么是命令模式 命令模式(Command Pattern)是一种数据驱动的设计模式,它属…

【C#学习笔记】值类型(1)

虽然拥有编程基础的人可以很快地上手C#,但是依然需要学习C#的特性和基础。本系列是本人学习C#的笔记,完全按照微软官方文档编写,但是不适合没有编程基础的人。 文章目录 .NET 体系结构Hello,World类型和变量(重要&…

docker容器创建私有仓库(第三篇)

目录 六、创建私有仓库 七、Docker资源限制 7.1、CPU使用率 7.2、CPU共享比例 7.3、CPU周期限制 7.4、CPU核心限制 7.5、CPU 配额控制参数的混合案例 7.6、内存限制 7.7、Block IO 的限制 7.8、限制bps 和iops 8、Docker数据持久化 8.1、数据持久化介绍 8.2、Volum…

操作系统的运行机制、中断和异常、系统调用

🐌个人主页: 🐌 叶落闲庭 💨我的专栏:💨 c语言 数据结构 javaweb 石可破也,而不可夺坚;丹可磨也,而不可夺赤。 操作系统 一、操作系统的运行机制1.1内核程序1.2应用程序1…