记录--一个好用的轮子 turn.js 实现仿真翻书的效果
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
国际惯例,官网链接
github上有几个demos例子,介绍了基础用法。
我参考官网的例子,写了一个demo示例
安装
turn.js 依赖 jquery 库,所以需要先安装 jquery
1 | npm install jquery --save |
引入
1 2 | import $ from 'jquery' import turn from '@/utils/turn.js' |
下载 turn.js 文件,然后在组件中引入
1 | import turn from "@/utils/turn.js" ; |
vue.config.js 配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const webpack = require( 'webpack' ); module.exports = { lintOnSave: false , //配置webpack选项的内容 configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: "jquery" , jQuery: "jquery" , }) ] }, } |
或者,这样:
1 2 3 4 5 6 7 8 9 10 11 | const webpack = require( 'webpack' ) module.exports = { chainWebpack: config => { config.plugin( 'provide' ).use(webpack.ProvidePlugin, [{ $: 'jquery' , jquery: 'jquery' , jQuery: 'jquery' , 'window.jQuery' : 'jquery' }]) } } |
翻页方法,以及参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | $( "#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); }, }, }); |
上一页
1 | $( "#book" ).turn( "previous" ); |
下一页
1 | $( "#book" ).turn( "next" ); |
示例代码
完整代码,已经放到 Gitee 上面了,组件名为 TurnjsComponent
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库