前端-3D电子相册-添加目录(源码改造)
2024-06-26 08:51:51
目录
一、效果图
二、config接收文件处理数据、单页30条、添加作品名称、添加sort序号递增
编辑
三、main.js在loaded函数添加新的渲染机制、添加目录点击跳转翻页功能
四、有需要3D电子相册改造源码、添加目录或者新功能的、关注收藏点赞联系我
一、效果图
二、config接收文件处理数据、单页30条、添加作品名称、添加sort序号递增
let authors = filteredArr.slice(1).map((item) => item.name);const chunkSize = 30; // 定义每个 chunk 的大小let chunks = Math.ceil(authors.length / chunkSize); // 计算 chunk 的数量let indexCounter = 1; // 初始化序号计数器for (let i = 0; i < chunks; i++) {let start = i * chunkSize;let end = start + chunkSize;if (end > authors.length) {end = authors.length;}let chunk = authors.slice(start, end);let chunkWithIndex = chunk.map((name) => {let paddedIndex = indexCounter.toString().padStart(2, '0');indexCounter++; // 递增序号计数器return { name, index: paddedIndex };});let obj = {coverState: true,directoryState: true,id: Math.random().toString(),magazineName: "亚洲水墨画大师作品收录专辑赏析",url:"//images.artvrpro.com/image%2F1683538180726-d0a078cbcb2eff4ed6b2095e564253ae.jpeg?" +Math.random(),authorNamesList: chunkWithIndex,};if (i >= 1) {// 超过30条数据，对当前页数据进行排序obj.authorNamesList.sort((a, b) => a.index.localeCompare(b.index));}filteredArr.splice(i + 1, 0, { ...obj });}三、main.js在loaded函数添加新的渲染机制、添加目录点击跳转翻页功能
if (page.directoryState) {// 创建目录容器let directoryContainer = $("<div></div>").css({display: "flex",flexDirection: "column",marginTop: "100px",marginLeft: "70px",});// 创建目录标题let directoryTitle = $("<p>目录</p>").css({color: "#000000","font-size": "45px",fontWeight: "bold", // 加粗});// 创建文本节点let contentsText = $("<p>CONTENTS</p>").css({color: "#000000","font-size": "16px",});// 将目录标题和文本节点插入到目录容器中directoryContainer.append(directoryTitle, contentsText);// 创建作者列表容器let authorContainer = $("<div></div>").css({display: "flex",marginTop: "50px",});// 创建两个作者列表容器let leftAuthorContainer = $("<div></div>").css({display: "flex",flexDirection: "column",marginRight: "100px",marginTop: "10px",});let rightAuthorContainer = $("<div></div>").css({display: "flex",flexDirection: "column",marginTop: "8px",});/** 主要功能是将作者列表分成两排并显示在页面上。具体实现过程如下：1.首先定义了一个变量midIndex，表示左右容器都要显示的作者数量，这里假设为15个。2.接着定义了两个变量leftCount和rightCount，分别表示左右容器已经显示的作者数量，初始值都为0。3.然后从page对象中取出作者列表authorList，只取前30个作者。4.遍历作者列表，对每个作者名字进行处理，如果长度超过30，则截取前30个字符并在末尾加上省略号；如果不包含《》符号，则在前后加上《》符号。然后创建一个文本节点authorText，并设置样式和点击事件。5.判断当前作者是在左容器还是右容器中显示，如果是在左容器中，则判断左容器已经显示的作者数量是否小于15，如果是，则将authorText插入到左容器中，并将leftCount加1；如果不是，则判断右容器已经显示的作者数量是否小于15，如果是，则将authorText插入到右容器中，并将rightCount加1。6.如果左右容器都已经显示了15个作者，则退出循环。7.最后将左右容器插入到作者列表容器authorContainer中，并将authorContainer插入到目录容器directoryContainer中，最后将directoryContainer插入到tmpContent容器中，完成作者列表的显示/** */// 分成两排let midIndex = 15; // 假设左右容器都要显示15个作者let leftCount = 0;let rightCount = 0;let authorList = page.authorNamesList;// 遍历作者列表，创建文本节点并插入到对应的容器中for (let i = 0; i < authorList.length; i++) {let authorName = authorList[i].name;let sortIndex = authorList[i].index;authorName =authorName.replace(/[\[\]"]/g, "").slice(0, 30) +(authorName.length > 30 ? "..." : "");let newName =authorName &&!authorName.includes("《") &&authorName &&!authorName.includes("》")? `《${authorName}》`: authorName;let authorText = $("<p>" + sortIndex + "." + newName + "</p>").css({color: "#000000","font-size": "16px",marginBottom: "10px",cursor: "pointer",zIndex: "99999",});if (i < midIndex && leftCount < 15) {leftAuthorContainer.append(authorText);leftCount++;} else if (rightCount < 15) {rightAuthorContainer.append(authorText);rightCount++;}if (leftCount >= 15 && rightCount >= 15) {// 如果左右容器都显示了15个作者，则退出循环break;}authorText.on("click", () => {const coverCount = 2;const pageCount = global.fliphtml5_pages.reduce((count, page) => {if (page.coverState) {return count + 1;}return count;}, 0);const totalPageCount = coverCount + pageCount;const index = parseInt(sortIndex, 10)-1; // 将字符串转换为数字console.log(index,totalPageCount);gotoPageFun(index + totalPageCount);});}// 将作者列表容器插入到目录容器中authorContainer.append(leftAuthorContainer, rightAuthorContainer);directoryContainer.append(authorContainer);// 将目录容器插入到tmpContent容器中that_.tmpContent.append(directoryContainer);}四、有需要3D电子相册改造源码、添加目录或者新功能的、关注收藏点赞联系我
前端-3D电子相册-添加目录(源码改造)相关推荐
- tcplayer 源码改造第三弹 - 防盗录
文章目录 前序 简介 人群 git地址 源码改造tcplayer.js(各位客官请自行格式化代码) 修改思路 添加配置参数 添加防盗录的节点 添加防盗录的节点样式 使用说明 参数说明 使用示例 相关推 ...
- tcplayer 源码改造第二弹 - 加入倍速播放
文章目录 前序 简介 人群 git地址 源码改造(各位客官请自行格式化代码) 实现倍速切换的函数 添加配置参数 添加获取当前倍速的方法 添加切换倍速的函数 参照切换清晰度的代码对控制栏加入倍速播放的节 ...
- 雨松MOMO《Unity 3D游戏开发》源码公布
原创文章如需转载请注明:转载自雨松MOMO程序研究院 本文链接地址:雨松MOMO<Unity 3D游戏开发>源码公布 下载源码时,首先大家请登陆图灵社区找到<Unity 3D游戏开发 ...
- Apollo+ES源码改造，构建民生银行的ELK日志平台配置管理中心【转载】
Apollo+ES源码改造,构建民生银行的ELK日志平台配置管理中心 原创 高效开发运维 架构头条 2019-02-28 作者 | 中国民生银行大数据基础平台运维组团队 编辑 | 张婵 随着 IT 业 ...
- Apollo+ES源码改造，构建民生银行的ELK日志平台配置管理中心
作者 | 中国民生银行大数据基础平台运维组团队 编辑 | 张婵 随着 IT 业务系统的迅速发展,中国民生银行需要考虑实现一套完整并适用于民生银行的日志文件智能分析与处理的解决方案.本文详细介绍了中国民 ...
- 【Android 插件化】VirtualApp 源码分析 ( 添加应用源码分析 | LaunchpadAdapter 适配器 | 适配器添加元素 | PackageAppData 元素 )
文章目录 一.添加应用源码分析 1.LaunchpadAdapter 适配器 2.适配器添加元素 3.PackageAppData 元素 一.添加应用源码分析 1.LaunchpadAdapter 适 ...
- 修复版拼团商城前端+后端微信小程序源码下载
1.怎么玩? 多人拼团,部分人获得得商品,没获得商品的人退款并瓜分红包,红包佣金从获得商品的人的订单利润里返. 2.参与拼团的人需要支付多少钱? 每个人需要支付商品规定的卖价金额,一元购模式的大家分担 ...
- android 赛车 源码,android 3D风格赛车游戏源码
android 3D风格赛车游戏源码,基于Libgdx 框架开发,三维视觉,包含20量敌方车辆和10量我方车辆,支持Admob广告插件,带游戏排行榜和成就系统 ,兼容手机.平板电脑等多种屏幕尺寸 ,游 ...
- 修复版薅羊毛拼团商城前端+后端微信小程序源码下载
修复版薅羊毛拼团商城前端+后端微信小程序源码下载 1.怎么玩? 多人拼团,部分人获得得商品,没获得商品的人退款并瓜分红包,红包佣金从获得商品的人的订单利润里返. 2.参与拼团的人需要支付多少钱? 每个 ...
最新文章
- java判断是否为数组_JS如何判断是否是数组？
- Python任意网段Web端口信息探测工具
- 计算机辅助管理考试,计算机辅助考试研究
- python json字符串类型的value换行方案
- PE经典DIY案例1：全解开方案让量产PE也能
- IAR无法goto的解决办法
- 哀悼！知名教授逝世，享年55岁！
- c++中cend end_vector :: cend（）函数以及C ++ STL中的示例
- Java与Web前端发展前景及薪资对比
- springMVC ---- 异步调用
- 【ZZ】神与学霸的区别
- LINUX查看一个进程用的内存准确数量
- 老游戏与你共渡亲子时光
- 机外码、区位码、国标码、机内码
- 【python】微信朋友圈分析
- Go mod包依赖管理工具使用详解
- 解决 Word 中”用于创建此对象的程序是 Visio，您的计算机尚未安装此程序。若要编辑此对象，您必须安装可以打开此对象的程序“
- plc控制柜图纸怎么看呢？
- react cron表达式生成组件qnn-react-cron
- attention综述论文阅读：An Overview of the Attention Mechanisms in ComputerVision