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

这篇具有很好参考价值的文章主要介绍了记录--一个好用的轮子 turn.js 实现仿真翻书的效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

国际惯例,官网链接

官网传送门

Github地址

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

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

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

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

 

安装

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

Gitee地址

 

本文转载于:

https://juejin.cn/post/7254443448564006967

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

 记录--一个好用的轮子 turn.js 实现仿真翻书的效果文章来源地址https://www.toymoban.com/news/detail-618254.html

到了这里,关于记录--一个好用的轮子 turn.js 实现仿真翻书的效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【各种轮子2】基于Icepak的PCB散热仿真比较

    目录 1、前言 2、建模过程 2.1 PCB 板建模 2.2 QFN 芯片封装建模 2.3 基于热阻模型的芯片建模 3、仿真结果 小结

    2024年02月09日
    浏览(36)
  • CANOE入门到精通——CANOE系列教程记录1 第一个仿真工程

    本系列以初学者角度记录学习CANOE,以《CANoe开发从入门到精通》参考学习,CANoe16 demo版就可以进行学习 CANoe是一种用于开发、测试和分析汽车电子系统的软件工具。它通过在不同层次上模拟汽车电子系统中的不同部件,如ECU、总线和传感器,来评估系统的功能和性能。CANoe也

    2024年02月03日
    浏览(49)
  • 前端项目部署自动检测更新后通知用户刷新页面(前端实现,技术框架vue、js、webpack)——方案一:编译项目时动态生成一个记录版本号的文件

    当我们重新部署前端项目的时候,如果用户一直停留在页面上并未刷新使用,会存在功能使用差异性的问题,因此,当前端部署项目后,需要提醒用户有去重新加载页面。 vue、js、webpack 编译项目时动态生成一个记录版本号的文件 轮询(20s、自己设定时间)这个文件,判断版

    2024年02月02日
    浏览(61)
  • 造轮子--自己封装一个 start

    都说不要造轮子,但是青柠认为,有的时候,造个轮子,更有助于清楚详细的业务逻辑,所以咱也自己写一个轮子,搞个系统开发。大体思路就是先搭建基础框架,然后细写业务逻辑,会涵盖主流的中间件,数据库,框架等。 一、新建一个SpringBoot项目my-spring-boot-starter 项目目

    2024年02月08日
    浏览(39)
  • 微信小程序实现翻书效果

    最近要在微信小程序里实现一个类似翻页的场景,网上翻看了多个案例无非就两种实现,第一种通过css 3d变换+动画实现,第二使用Turn.js现成库。前者实现效果一般,后者js库是基于古老的JQuery来实现的并没办法移植到小程序了里。 下面就自己调研了一下turnjs来实现小程序的

    2024年02月10日
    浏览(90)
  • 用库造一个list的轮子 【C++】

    构造函数 list是一个带头双向循环链表,在构造一个list对象时,new一个头结点,并让其prev和next都指向自己即可。 拷贝构造函数 赋值运算符重载 版本一(推荐): 参数不使用引用,让编译器自动调用list的拷贝构造函数构造出来一个list对象,然后调用swap函数将原容器与该

    2024年02月13日
    浏览(36)
  • 前端又出新轮子Nue.js,但还是低代码更香!

    别TM卷了!!! 自从前后端分离以来,前端前端的车轮滚滚向前,轮子造的越来越圆。每个人都在适应这个轮子的节奏,稍微不注意就会被甩出车轮之外。 调侃归调侃,既然口子已经开了,你只能往前走,这篇文章也是想到什么写什么。毕竟谁都不知道会不会突然间又出了个

    2024年02月05日
    浏览(36)
  • 我封装的一个REPR轮子 Biwen.QuickApi

    提供一种简单集成的Minimal Web Api交互模块 遵循了 REPR 设计 (Request-Endpoint-Response) 开箱即用的Api路由 和 权限,Bind,validator体验 该库是NET WebApi/Minimal Api的补充,性能≈MinimalApi,遥遥领先于MVC和WebApi,但是提供了最简单的的使用体验 write less, do more ; write anywhere, do anything 欢迎小伙

    2024年02月08日
    浏览(38)
  • 记录--封装一个通过js调用的全局vue组件

    在使用vue项目编写的时候,不可避免的会碰到需要时js api来调用组件进行显示的情况 例如饿了么element ui 的 Notification 通知、Message 消息提示等组件 虽然已经提供了,但是由于api的限制,我们只能通过特定的参数来有限的改变组件的样式 之前的文章说过可以使用 new Vue() 、

    2024年02月09日
    浏览(55)
  • 前端新轮子Nue JS,号称要打造全新的Web生态!!!

    目录 What is Nue JS? 用更少的代码构建用户界面 按比例构建 解耦样式 反应式和同构 UI库文件 更简单的工具 用例 文章参考资料 Nue JS 是一个非常小的(压缩后 2.3kb)JavaScript 库,用于构建 Web 界面。 它是即将推出的 Nue 生态系统的核心。 它就像 Vue.js、React.js 或 Svelte,但没有h

    2024年02月08日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包