记录--一个好用的轮子 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,一经查实,立即删除!

相关文章

web APIs-练习三

全选反选案例&#xff1a; <!DOCTYPE html><html><head lang"en"><meta charset"UTF-8"><title></title><style>* {margin: 0;padding: 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px s…

Redis Cluster 在Spring中遇到的问题

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

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…

vue3学习-组件基础、深入组件

组件 基本概述 单独的 .vue文件 单文件组件&#xff08;SFC&#xff09;&#xff08;single file component&#xff09; 使用子组件 导入&#xff0c;无需注册&#xff0c;直接使用编译时&#xff0c;区分大小写可使用 />关闭标签 传递 props 需要再组件上声明注册 def…

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

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

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

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

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

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

“深入理解Spring Boot:快速构建微服务架构的利器“

标题&#xff1a;深入理解Spring Boot&#xff1a;快速构建微服务架构的利器 摘要&#xff1a;Spring Boot是一种基于Spring框架的开源项目&#xff0c;它通过自动化配置和约定优于配置的原则&#xff0c;使得开发者能够快速构建微服务架构。本文将深入介绍Spring Boot的特点和…

[React]useMemoizedFn和useCallback对比

useMemoizedFn文档地址&#xff1a;https://ahooks.js.org/zh-CN/hooks/use-memoized-fn hooks组件内什么时候会更新自定义函数 在 React 中&#xff0c;自定义的 Hooks 内部的函数在以下常见的几种情况下会被重新赋值&#xff0c;导致更新引用&#xff1a; 组件重新渲染&…

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

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

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

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

flink数据流 单(kafka)流根据id去重

方法1 不推荐 package com.yy.uniqimport org.apache.flink.configuration.{Configuration, RestOptions} import org.apache.flink.streaming.api.scala.StreamExecutionEnvironment import org.apache.flink.table.api.bridge.scala.StreamTableEnvironmentimport java.time…

Makefile学习2

文章目录 Makefile学习2Makefile条件判断ifeq 关键字ifneq 关键字ifdef 关键字ifndef 关键字 Makefile函数用户自定义函数文本处理函数 Makefile 通配符 Makefile学习2 Makefile条件判断 使用条件判断&#xff0c;可以让make在编译程序时&#xff0c;根据不同的情况&#xff…

IO进程线程day5(2023.8.2)

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

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

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

代码随想录算法训练营day52

文章目录 Day52 最长递增子序列题目思路代码 最长连续递增序列题目思路代码 最长重复子数组题目思路代码 Day52 最长递增子序列 300. 最长递增子序列 - 力扣&#xff08;LeetCode&#xff09; 题目 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 …

前端视频播放技术概览

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

阿里云国际版在使用过程中应该注意什么呢?

为确保系统稳定性&#xff0c;用户不得进行以下操作。否则&#xff0c;阿里云可能无法解决由以下违规操作引起的问题&#xff1a; 1) Windows系统中的PV Drivers 程序不可删除 PV Drivers程序为服务器虚拟化驱动程序&#xff0c;请不要针对该程序进行任何操作&#xff0c;如果删…

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

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

iOS--runtime

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