阅读量:4
目录
前端书籍翻页效果
前端实现翻书效果，附带vue源码
源码下载地址
前言
实际业务开发中，有时候会遇到需要在前端页面内实现翻书效果的需求，本篇文章就为大家介绍如何使用vue实现前端翻书效果，包括鼠标拖动/点击实现翻页，通过按钮实现翻页等功能，下面给出核心代码示例。完整代码请移步之下载页面下载
代码示例
创建模板页面
创建13个页面，每个页面是一张图片，所有图片资源统一放置在源码包内。
<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样式
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组件，这里不再赘述。
大家有任何问题都可评论区留言或私信，相互交流学习！😉😉😉
