记录--一个好用的轮子 turn.js 实现仿真翻书的效果
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
国际惯例,官网链接
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 false
autoCenter: true,
// 设置可翻页的页角(都试过了,乱写 4个角都能出发卷起), bl,br tl,tr bl,tr
turnCorners: "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
本文转载于:
https://juejin.cn/post/7254443448564006967
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
记录--一个好用的轮子 turn.js 实现仿真翻书的效果的更多相关文章
- JS实现图片翻书效果示例代码
js 图片翻书效果. picture.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
- JS实现图片翻书效果
picture.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http- ...
- 记录一个在线压缩和还原压缩js代码的工具
packer – javascript 压缩工具 http://dean.edwards.name/packer/ Javascript Beautifier ---可以恢复某些压缩工具压缩的js代码 ...
- turn.js中文API 写一个翻页效果的参数详细解释
$('.flipbook').turn({ width: 922, height: 600, elevation: 50, gradients: true, a ...
- turn.js实现翻书效果
JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...
- Turn.js 实现翻书效果的学习与总结
最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想 ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- jQuery中turn.js(翻页效果)学习笔记
Turn.js是一个内置的jQuery翻页插件1 html中引入<script type="text/javascript" src="js/turn.js&quo ...
- JQuery的turn.js实现翻书效果
前言: hello大家好~好久没更博了……今天来和大家分享下JQ的turn.js,下面我先来简单介绍下我们今天的主角turn.js. Turn.js是一个JavaScript库,它集合了HTML5的所 ...
- jQuery+turn.js翻书、文档和杂志3种特效演示
很好用的一款插件jQuery+turn.js翻书.文档和杂志3种特效演示 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
随机推荐
- Apache Hudi 设计与架构解读
1. 简介 Apache Hudi(简称:Hudi)允许您在现有的hadoop兼容存储之上存储大量数据,同时提供两种原语,使得除了经典的批处理之外,还可以在数据湖上进行流处理. 这两种原语分别是: 1 ...
- JS leetcode 找到所有数组中消失的数字 题解分析
壹 ❀ 引 十天前做的一道题了,一直没整理,今天才花时间去读了官方题解思路,这道题也凸显出了算法思路的重要性,执行耗时差的真不是一点半点.题目来自448. 找到所有数组中消失的数字,题目描述如下: 给 ...
- 面试官:谈一谈你对 redis 分布式锁的理解
为什么需要分布式锁 在 jdk 中为我们提供了多种加锁的方式: (1)synchronized 关键字 (2)volatile + CAS 实现的乐观锁 (3)ReadWriteLock 读写锁 ( ...
- Spring源码之springMVC
目录 web.xml 程序入口 servlet 初始化 运行阶段 销毁阶段 DispatcherServlet 初始化 DispatcherServlet 的逻辑处理 web.xml 它的作用是配置初 ...
- 学习go语言编程之面向对象
类型系统 类型系统是指一个语言的类型体系结构,一个典型的类型系统通常包含如下基本内容: 基础类型,如:byte.int.bool.float等 复合类型,如:数组.结构体.指针等 可以指向任意对象的类 ...
- 优雅使用前端枚举Enum,符合国标的那种!
01.什么是枚举Enum? 枚举Enum是在多种语言中都有的一种数据类型,用于表示一组特定相关的常量数据集合,如性别(男.女).数据状态(可用.禁用).垂直对齐(顶端.居中.底部).星期等.特点是数据 ...
- 【系统设计】集团内部HR系统完结,项目从0到1总结
最近一年学习了PMP,结合下PMP的知识,分享一下最近HR项目的全生命周期流程管理(需求分析.产品设计.系统开发.测试.上线.运营). 先一句话概括:战略分析-收集需求-流程梳理-关键需求-IT规划- ...
- 旅游景点 Tourist Attractions (壮压 DP)题解
简化题意 题目链接--不卡内存班 题目链接--卡内存版 给定 \(n\) 个点和 \(m\) 条边组成的无向图,按照一定限制要求停留 \(2\sim k+1\) 共 \(k\) 个点(可以经过但不停留 ...
- 【Azure 应用服务】在Azure App Service多实例的情况下,如何在应用中通过代码获取到实例名(Instance ID)呢?
问题描述 App Service开启多实例后,如何在代码中获取当前请求所真实到达的实例ID(Instance ID)呢? 问题答案 App Service 通过 环境变量的方式 显示的输出实例ID等信 ...
- 【Azure 应用服务】Azure App Service 在不配置自定义域名的情况下如何使用呢?
问题描述 根据中国法律法规的规定及相关监管机构的要求,当使用应用服务创建应用时,须立即绑定一个已经完成ICP备案的自定义域名并通过该自定义域名访问该应用服务.任何通过Internet对应用服务默认域名 ...