前端书籍翻页效果

目录

前端书籍翻页效果

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

前言

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

代码示例

创建模板页面

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

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

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,// 翻页速度，默认600msduration: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组件，这里不再赘述。

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