目录
前端书籍翻页效果
前端实现翻书效果,附带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组件,这里不再赘述。
大家有任何问题都可评论区留言或私信,相互交流学习!😉😉😉