前端书籍翻页效果

目录

前端书籍翻页效果

前端实现翻书效果,附带vue源码
源码下载地址

前言

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

代码示例

创建模板页面

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

html 复制代码
<template>
<!--  创建id为book的书籍容器,内部包含13个页面-->
  <div id="book">
    <div><img src="./assets/img/00.jpg" alt=""></div>
    <div><img src="./assets/img/11.jpg" alt=""></div>
    <div><img src="./assets/img/12.jpg" alt=""></div>
    <div><img src="./assets/img/21.jpg" alt=""></div>
    <div><img src="./assets/img/22.jpg" alt=""></div>
    <div><img src="./assets/img/31.jpg" alt=""></div>
    <div><img src="./assets/img/32.jpg" alt=""></div>
    <div><img src="./assets/img/41.jpg" alt=""></div>
    <div><img src="./assets/img/42.jpg" alt=""></div>
    <div><img src="./assets/img/51.jpg" alt=""></div>
    <div><img src="./assets/img/52.jpg" alt=""></div>
    <div><img src="./assets/img/61.jpg" alt=""></div>
    <div><img src="./assets/img/62.jpg" alt=""></div>
  </div>
</template>

css样式

css 复制代码
html,body, #app{
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 30px;
}

#app {
  margin: 0 auto;
  padding: 2rem;
  font-weight: normal;
}

编写js代码

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

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]
      }
    }
  });

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

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

结论

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

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

相关推荐
Yaml426 分钟前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
尚梦32 分钟前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子1 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山1 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享2 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf4 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨4 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL4 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1115 小时前
css实现div被图片撑开
前端·css
薛一半5 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js