前端书籍翻页效果

目录

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

前端书籍翻页效果

前端实现翻书效果,附带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,// 翻页速度,默认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); // 翻到第几页 4console.log(view); //当前展示那几页 是一个数组 [4,5]}}});

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

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

结论

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/872796.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

09 深度推荐模型演化中的“平衡与不平衡“规律

你好&#xff0c;我是大壮。08 讲我们介绍了深度推荐算法中的范式方法&#xff0c;并简单讲解了组合范式推荐方法&#xff0c;其中还提到了多层感知器&#xff08;MLP&#xff09;。因此&#xff0c;这一讲我们就以 MLP 组件为基础&#xff0c;讲解深度学习范式的其他组合推荐方…

电子设备中丝杆模组高精度重复定位技术的原理!

丝杆模组是由螺旋丝杆和导杆组成的一种机械运动控制系统&#xff0c;通过在导杆内进行旋转&#xff0c;使导杆沿着线性方向进行移动&#xff0c;从而实现机械运动的线性控制。丝杆模组以其高精度、高稳定性和可重复定位的特性&#xff0c;在现代工业自动化和精密制造领域发挥着…

controller-from表单1

mvc模式是spring boot 开发web应用程序主要使用模式&#xff0c;mvc分别代表model模型&#xff0c;view是视图 &#xff0c;controller是控制器 controller是对接用户请求数据调用服务层代码&#xff0c;具体怎么操作 浏览器发送http请求给到dispatcherServlet&#xff08;前…

c++ primer plus 第16章string 类和标准模板库,string 类输入

c primer plus 第16章string 类和标准模板库,string 类输入 c primer plus 第16章string 类和标准模板库,string 类输入 文章目录 c primer plus 第16章string 类和标准模板库,string 类输入16.1.2 string 类输入程序清单 16.2 strfile.cpp 16.1.2 string 类输入 对于类&…

【操作系统】文件管理——文件存储空间管理(个人笔记)

学习日期&#xff1a;2024.7.17 内容摘要&#xff1a;文件存储空间管理、文件的基本操作 在上一章中&#xff0c;我们学习了文件物理结构的管理&#xff0c;重点学习了操作系统是如何实现逻辑结构到物理结构的映射&#xff0c;这显然是针对已经存储了文件的磁盘块的&#xff0…

题解|2023暑期杭电多校03

【原文链接】 &#xff08;补发&#xff09;题解|2023暑期杭电多校03 1011.8-bit Zoom 不那么签到的签到题、模拟题 题目大意 给定一个 n n n\times n nn 大小的字符矩阵表示一张图片&#xff0c;每种字符代表一种颜色&#xff1b;并给定 Z Z Z 代表缩放倍率 满足以下条…

无人驾驶的未来:AI如何重塑我们的出行世界

无人驾驶汽车&#xff0c;作为人工智能&#xff08;AI&#xff09;技术的集大成者&#xff0c;正以前所未有的速度改变着我们的出行方式。从机器学习到计算机视觉&#xff0c;再到人工智能生成内容&#xff08;AIGC&#xff09;&#xff0c;AI技术的每一次进步都在为无人驾驶汽…

Linux内核编程(八) 添加自定义目录驱动菜单 (Kconfig文件使用)

本文目录 一、Linux 内核驱动目录二、自定义驱动的Kconfig编写●示例&#xff1a;在 drivers 菜单添加一个自己驱动的子菜单。 三、自写驱动的Makefile编写四、总结 一个Linux内核源码&#xff0c;其中包含了很多驱动程序&#xff0c;对应不同的功能。我们在编译内核时。如果将…

设计模式:真正的建造者模式

又臭又长的set方法 经常进行Java项目开发使用各类starter的你一定见过这种代码&#xff1a; public class SwaggerConfig {Beanpublic Docket api() {return new Docket(DocumentationType.SWAGGER_2).select().apis(RequestHandlerSelectors.any()).paths(PathSelectors.any…

【BUG】已解决:ModuleNotFoundError: No module named ‘cv2’

已解决&#xff1a;ModuleNotFoundError: No module named ‘cv2’ 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&#xff0c;211科班出身&#xff0c;就职于医疗科技公司&#xff0c;热衷分享知识&#xff0c;武汉城市开…

【Pyhton】Pip换源(Windows)

在Python中使用pip换源的方法可以通过修改pip配置文件来实现。具体步骤如下&#xff1a; 暂时修改&#xff08;只应用于本次下载&#xff09; pip install 库名 -i 国内源链接/simple --trusted-host 国内源链接 常见的国内源链接见下方永久修改中的内容。 示例&#xff1a…

【ffmpeg命令入门】ffmpeg转码过程

文章目录 前言转码图示过程含义总结 前言 在数字媒体处理领域&#xff0c;ffmpeg 是一款非常强大的工具&#xff0c;它支持多种音视频格式&#xff0c;可以进行转码、剪辑、滤镜等操作。ffmpeg 的强大功能和灵活性使其成为了音视频处理的首选工具。然而&#xff0c;由于其功能…

python-Web

FLASK整体框架: from flask import Flask,render_templateapp Flask(__name__)app.route("/show/info")#网址 def index():#网址对应的函数return render_template("index.html")#falsk 支持将字符串写入文件if __name____main__:app.run()#访问网站的时…

Java中的压缩与解压缩操作详解

Java中的压缩与解压缩操作详解 在Java编程中&#xff0c;处理压缩和解压缩文件是一个常见的需求。Java提供了多种方式来实现这些操作&#xff0c;包括使用标准的Java类库和第三方库。 本文将介绍如何使用Java进行压缩和解压缩操作&#xff0c;涵盖基本的压缩文件格式如ZIP以及…

获取JVM虚拟机的内存和CPU核心数

获取内存和核心数量 Runtime runtime Runtime.getRuntime();long freeMemory runtime.freeMemory();long maxMemory runtime.maxMemory();long totalMemory runtime.totalMemory();int availableProcessors runtime.availableProcessors();System.out.println("空闲内…

基于 Web 的家校联系系统的设计与实现

目录 基于 Web 的家校联系系统的设计与实现 一、绪论 &#xff08;一&#xff09;研究背景 &#xff08;二&#xff09; 研究目的 &#xff08;三&#xff09; 研究意义 二、需求分析 &#xff08;一&#xff09; 功能需求 &#xff08;二&#xff09; 性能需求 &#…

Android中Context概述

目录 一 概念二 使用三 注意事项 一 概念 Context&#xff0c;上下文&#xff0c;可以获取应用的资源和信息。Context在加载资源、启动Activity、获取系统服务、创建View等操作都要参与。它提供了关于应用环境全局信息的接口。它是一个抽象类&#xff0c;它的执行被Android系统…

WPF TreeView 全选/反选/子级选中父级也选中

// TreeView 全选/反选/子级选中父级也选中CSDN 下载链接 <TreeView Grid.Column"0" Grid.Row"1" Grid.ColumnSpan"2" Name"menuTree" Width"240" ItemsSource"{Binding MenuList}" BorderThickness"0&q…

开发一个自己的chrom插件

开发一个自己的chrom插件 一、创建一个文件夹 二、配置文件manifest.json 创建名字为&#xff1a;manifest.json的配置文件&#xff0c;模板如下&#xff1a; {"manifest_version": 3,"name": "Hello World Extension","version": …

AV1 编码标准屏幕内容编码技术概述

AV1 屏幕内容编码 为了提高屏幕捕获内容的压缩性能&#xff0c;AV1采用了几种编码工具&#xff0c;例如用于处理屏幕画面中重复模式的内帧内块复制&#xff08;IntraBC&#xff09;&#xff0c;以及用于处理颜色数量有限的屏幕块的调色板模式。 帧内块拷贝 AV1 编码中的 Intra …