前端书籍翻页效果

目录

  • 前端书籍翻页效果
    • 前言
    • 代码示例
      • 创建模板页面
      • 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.rhkb.cn/news/379032.html

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

相关文章

N Puzzle (数字推盘游戏)

N Puzzle [数字推盘游戏] 1. 15 Puzzle2. N PuzzleReferences puzzle /ˈpʌzl/&#xff1a;n. 谜&#xff0c;智力游戏&#xff0c;疑问&#xff0c;不解之谜&#xff0c;令人费解的事 vt. 迷惑&#xff0c;使困惑1. 15 Puzzle https://en.wikipedia.org/wiki/15_puzzle The…

C#开发:Git的安装和使用

一、安装git 二、如何克隆代码&#xff1f; 1.找到某个本地目录&#xff0c;右键-gitbash 2. 输入以下命令&#xff08;红色是地址&#xff0c;在gitlab获取或联系管理员获取&#xff0c;下图为复制地址的方式&#xff09;&#xff1a; git clone http://xxxxxxxxx.git 输入帐…

MySQL双主双从实现方式

双主双从&#xff08;MM-SS&#xff09; 前言 避免单一主服务器宕机&#xff0c;集群写入能力缺失 从 1 复制 主1 &#xff0c;从 2 复制 主 2 主 1 复制 主 2&#xff0c;主 2 复制主 1 也就是 主 1 和主 2 互为主从。主1主2互为主从&#xff0c; 是为了以下情景&#xff0c…

C#字符串基本操作

1、代码 //1、创建字符串&#xff08;获取长度&#xff09;string str "Hello, World!";Console.WriteLine($"string:{str},length:{str.Length}");//2、字符串连接string str1 "Hello, ";string str2 "World!";Console.WriteLine…

datahub安装部署

作者&#xff1a;恩慈 背景&#xff1a;由于某客户需要建立sparksql的血缘关系&#xff0c;于是提出了datahub&#xff0c;由于网上关于datahub资料较少&#xff0c;因此这里做以记录。 datahub作为一个元数据管理平台&#xff0c;可以对数据资产进行有效的组织&#xff0c;还…

HarmonyOS 开发者联盟高级认证最新题库

本篇文章包含 Next 版本更新后高级认证题库中95%的题目。 答案正确率 50-60%&#xff0c;答案仅做参考。 请在考试前重点看一遍题目&#xff0c;勿要盲目抄答案。 欢迎在评论留言正确答案和未整理的题目。 1、下面关于方舟字节码格式PREF_IMM16_v8_v8描述正确的是 16位前缀操作…

中间件的理解

内容来源于学习网站整理。【一看就会】什么是前端开发的中间件&#xff1f;_哔哩哔哩_bilibili 每日八股文~白话说mq&#xff0c;消息中间件_哔哩哔哩_bilibili 例如&#xff1a; 1&#xff09;两个人打电话&#xff0c;中间的通信网络就是中间件。 2&#xff09;菜鸟驿站&…

Java.Net.UnknownHostException:揭开网络迷雾,解锁异常处理秘籍

在Java编程的浩瀚宇宙中&#xff0c;java.net.UnknownHostException犹如一朵不时飘过的乌云&#xff0c;让开发者在追求网络畅通无阻的道路上遭遇小挫。但别担心&#xff0c;今天我们就来一场说走就走的探险&#xff0c;揭秘这个异常的真面目&#xff0c;并手把手教你几招应对之…

巧用通义灵码助力护网面试

前言 前几年护网还算是一个比较敏感的话题&#xff0c;但是随着近段时间的常态化开始&#xff0c;护网行动也是逐渐走进了大众的视野&#xff0c;成为了社会各界共同关注的安全盛事。本篇也是受通义灵码备战求职季活动的启发&#xff0c;结合近期要开始的护网行动&#xff0c…

每日一题,力扣leetcode Hot100之128. 最长连续序列

题目理解&#xff1a; 从示例1可以看出简单的连续数字就算&#xff0c;从示例2可以看出当有重复数字时&#xff0c;是不算长度的 解法一&#xff1a; 第一个想到的解法&#xff0c;就是对nums排序&#xff0c;然后双层循环遍历进行判断&#xff0c;当前一个和后一个相减等于…

Yolov8网络结构学习

详解YOLOv8网络结构/环境搭建/数据集获取/训练/推理/验证/导出/部署 深入解析YOLOv8&#xff1a;网络结构与推理过程 YOLO? You Know! --YOLOV8详解 一&#xff1a;yolov8总体结构 1.Backbone:它采用了一系列卷积和 反卷积层只来提取特征&#xff0c;同时也使用了残差连接和…

广联达Linkworks ArchiveWebService XML实体注入漏洞复现

0x01 产品简介 广联达 LinkWorks(也称为 GlinkLink 或 GTP-LinkWorks)是广联达公司(Glodon)开发的一种BIM(建筑信息模型)协同平台。广联达是中国领先的数字建造技术提供商之一,专注于为建筑、工程和建筑设计行业提供数字化解决方案。 0x02 漏洞概述 广联达 LinkWorks…

小程序图片下载保存方法,图片源文件保存!

引言 现在很多时候我们在观看到小程序中的图片的时候&#xff0c;想保存图片的原文件格式的话&#xff0c;很多小程序是禁止保存的&#xff0c;即使是让保存的话&#xff0c;很多小程序也会限制不让保存原文件&#xff0c;只让保存一些分辨率很低的&#xff0c;非常模糊的图片…

【.NET全栈】ASP.NET开发web应用——ASP.NET中的样式、主题和母版页

文章目录 前言一、在ASP.NET中应用CSS样式1、创建CSS样式&#xff08;1&#xff09;内联样式&#xff08;2&#xff09;内部样式表&#xff08;3&#xff09;外部样式表 2、应用CSS样式&#xff08;1&#xff09;菜鸟教程-简单例子&#xff08;2&#xff09;菜鸟教程-用户界面&…

详解:adobe国际认证有多少种

Adobe国际认证&#xff0c;作为全球公认的数字媒体和创意设计技能认证&#xff0c;涵盖了多个专业领域和软件应用。这一认证体系为专业人士提供了展示自己技能水平的平台&#xff0c;并帮助他们在职场中脱颖而出。那么&#xff0c;Adobe国际认证到底有多少种呢&#xff1f; Ado…

【常见开源库的二次开发】基于openssl的加密与解密——Base的编解码(二进制转ascll)(二)

目录&#xff1a; 目录&#xff1a; 一、 Base64概述和应用场景 1.1 概述 1.2 应用场景 二、Base16 2.1 Base16编码 2.2 Base16编解码 三、Base64 四、OpenSSL BIO接☐ 4.1 Filter BIOs&#xff1a; 4.2 Source/Sink BIOs&#xff1a; 4.3 应用场景&#xff1a; 4.4 具体使用&…

从挑战到实战!TDengine 新能源行业研讨会要点回顾

近年来&#xff0c;随着全球对可再生能源需求的不断增长&#xff0c;新能源行业迎来了前所未有的发展机遇。然而&#xff0c;伴随着行业的快速发展&#xff0c;海量数据的管理和高效利用成为了行业面临的重要挑战。如何通过先进的数据管理技术提升新能源系统的效率和可靠性&…

前端vue3 实现pdf 生成的 类插件

前端 PDF 打印插件&#xff0c;基于 jspdf 和 html2canvas 开发 jspdfhtml2canvas 安装依赖 jspdf、html2canvas npm i jspdf html2canvas直接上代码 hooks

Hadoop3:MR程序的数据倾斜问题处理

一、数据倾斜 什么是数据倾斜&#xff1f; 学过Redis集群的都知道数据倾斜这个问题。 就是大量数据&#xff0c;分配不均匀的现象。 二、MR数据倾斜 1、怎么判断出现数据倾斜&#xff1f; 数据频率倾斜——某一个区域的数据量要远远大于其他区域。 数据大小倾斜——部分记…

ArkUI组件——循环控制/List

循环控制 class Item{name: stringprice:number}private items:Array<Item> [new Item("A0",2399),new Item("BE",1999),new Item("Ro",2799)] ForEach(this.items,(item:Item) > {})List组件 列表List是一种复杂的容器&#xff0c;…