❤️一文掌握HTML+CSS+JS开发小说阅读器❤️

2024-06-26 23:47| 来源: 网络整理| 查看: 265

上周《让CSS3中Transform属性带你一文实现炫酷的转盘抽奖效果》博文中说到这周出一篇介绍小说阅读器开发的博文，可能是离职不上班的原因，在家变得也懒散了一些，本来是打算上周三时候动手开发的，一直拖到了昨天才开始开发，花了快一天的时间才把主要的功能实现完，演示效果如下：

❤️一文掌握HTML+CSS+JS开发小说阅读器【仿微信读书及起点读书阅读器】❤️

下面主要分四个部分介绍小说阅读器的开发流程：

阅读器功能划分及效果图拖动进度条切换章节上下滚动、左右滑动翻页其它模块

一、阅读器功能划分及效果图

关于阅读器功能的划分主要参考了起点读书及微信读书小程序及APP，整体的布局、翻页阅读方式是采用了起点读书；阅读器背景颜色、拖动进度条切换章节、操作栏UI参考了微信读书。

整体布局：在这里插入图片描述

在这里插入图片描述

二、拖动进度条切换章节

用户左右拖动圆点，监听其touchstart点击事件，然后在其内部再监控touchmove移动事件，计算圆点在进度条的位置，然后与整个进度条长度相除，就算出当前的进度值百分比，再与章节数组长度相乘，算出当前章节的下标，进而拿到当前章节的信息。

用户离开屏幕，触发touchend事件，根据获取的章节信息，调用相应方法，更新阅读器章节内容，此部分代码如下所示：

/** * 拖动进度条 */ let now = $('#r-progress-now'); // 已拖动进度条 let bar = $('#r-progress-bar'); // 背景进度条 $('#r-progress').on('touchstart', function () { // 监听用户触发屏幕事件 let chapterId; // 记录章节ID let _this = this; let width = 60; // 进度条每次滑动值 let width_bar = bar[0].offsetWidth - this.offsetWidth - 3; // 背景进度条实际使用长度 _this.ontouchmove = function(ev) { // 监听圆点拖动事件 ev = ev || window.event; let width_new = ev.changedTouches[0].clientX - width; // 圆点距离背景进度条左边距离值 if (width_new // 设置最大值 width_new = width_bar; } let percent = (width_new / width_bar).toFixed(2); // 计算当前拖动百分比 let menuLength = menuMap.length; // 小说目录数组长度 index = parseInt(percent * menuLength); // 当前数组下标 index = (index >= menuLength) ? (menuLength - 1) : index; // 更新章节ID、章节名及已拖动进度条的长度值 $('#r-progress-title').html(menuMap[index]['name']); chapterId = menuMap[index]['id']; now.css('width', width_new + 'px'); }; _this.ontouchend = function() { // 监听用户离开屏幕事件 // 根据当前ID获取章节 changeChapter(chapterId); } });

效果图：

在这里插入图片描述

三、上下滚动、左右滑动翻页

左右滑动翻页是参考了起点读书的web阅读器翻页效果，两种翻页方式的话对用户的来说体验也好一些。

该功能布局是使用column-width【设置多列布局，规定列的宽度，内容】和transform【translateX：设置区块实现平移效果，该属性不会造成页面重绘或者回流】属性实现。

该功能用户点击换页是分为三个区域，左【拉取上一页】、中【弹起操作栏】、右【拉取下一页】。用户点击阅读器监控touchstart事件，判断当前区域在哪个部位，如果在左右部分，则计算当前要移动的值，然后修改阅读器transform中translateX的属性值，就完成了左右滑动换页，此部分代码如下所示：

/** * 左右翻页 */ let rContent = $('#r-section'); // 阅读器盒子对象 let touch = { startX: 0, count: 0 }; /** * 阅读器弹出操作栏或左右翻页效果 */ rContent.on('touchstart', function(event){ // 当前点击距离屏幕的距离 touch.startX = event.targetTouches[0]['pageX']; if (touch.startX > contentWidth / 4 && touch.startX // 上下滚动 return; } if (touch.startX // 向上翻页 touch.count --; } if (touch.startX > (contentWidth * 3 / 4)) { // 向下翻页 touch.count ++; } // 计算平移值，contentWidth 为屏幕的阅读器宽度，初始化时计算的 let translateWidth = -contentWidth * touch.count; $('#r-section').css('transform', 'translateX(' + translateWidth + 'px)'); });

左右滑动效果图：在这里插入图片描述上下滚动效果图：

四、其它模块

其它模块的话就是切换阅读器皮肤、阅读器文字样式及阅读器内容设置，前面两个已经实现，内容设置的话字体大小和行距两个更能还没做，这个做起来也不是太费时间，另外还有就是保存用户选中样式，这个可以使用Localstorage中的setItem及getItem进行缓存，这个也比较简单，就不介绍了。

关于整个阅读器主要功能已经开发完成，但是真正的放在整个小说软件内与接口联调，还有不小的工作量，因为时间原因，这个也不展开介绍了。

阅读器皮肤效果图：在这里插入图片描述

阅读器字体效果图：在这里插入图片描述

下载地址

下周有时间的话，可能会出一篇《团队开发过程中的Git相关的使用》，带你解析微信小程序中智能聊天机器人的接入过程。

【本文地址】

公司简介

联系我们