前端书籍翻页效果

目录

• 前端书籍翻页效果
• • 前言
  • 代码示例
  • • 创建模板页面
    • css样式
    • 编写js代码
    • 结论

      前端书籍翻页效果

      前端实现翻书效果，附带vue源码

      源码下载地址

      

      前言

      实际业务开发中，有时候会遇到需要在前端页面内实现翻书效果的需求，本篇文章就为大家介绍如何使用vue实现前端翻书效果，包括鼠标拖动/点击实现翻页，通过按钮实现翻页等功能，下面给出核心代码示例。完整代码请移步之下载页面下载

      代码示例

      创建模板页面

      创建13个页面，每个页面是一张图片，所有图片资源统一放置在源码包内。

      css样式

      html,body, #app{
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding: 30px;
      }
      #app {
        margin: 0 auto;
        padding: 2rem;
        font-weight: normal;
      }
      

      编写js代码

      初始化翻书节点，包含配置项字段，如书籍宽高、位置等字段，还可以监听翻书事件，比如当前书籍翻到第几页、正在翻页、翻页结束等事件

      $("#book").turn({
          width: 1280,
          height: 720,
          // 自动居中
          autoCenter: true,
          // 翻页速度，默认600ms
          duration: 1000,
          // 展示方式，single：单页展示，double：双页展示
          display: "double",
          // 开启硬件加速
          acceleration: true,
          when: {
            start: function (e, page, view) {
              // 开始翻页时
            },
            turning: function (e, page, view) {
              // 正在翻页
            },
            turned: function (e, page, view) {
              // 翻页完成
              console.log(e); // 事件对象
              console.log(page); // 翻到第几页 4
              console.log(view); //当前展示那几页 是一个数组 [4,5]
            }
          }
        });
      

      通过按钮实现上一页下一页

      	// 通过点击事件实现书籍的翻页功能
      	$("#prev").click(function () {
      	  // 上一页
      	  $("#book").turn("previous");
      	})
      	$("#next").click(function () {
      	  // 下一页
      	  $("#book").turn("next");
      	})
      

      结论

      通过上述简单的几行代码，就可以轻松实现翻书效果，除此之后页面内容还可以使用vue组件，这里不再赘述。

      大家有任何问题都可评论区留言或私信，相互交流学习！😉😉😉