上周《让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 <= 0) {
// 设置最小值
width_new = 0;
}
if (width_new >= width_bar) {
// 设置最大值
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 < (contentWidth * 3 / 4)) {
// 弹出操作栏
$('#r-footer').css('display', 'block');
$('#r-header').css('display', 'flex');
$('#r-mask').css('visibility', 'unset');
// touch 和 click事件的相关冲突，有touch 就没有了，click功能，解决方法：去掉
event.preventDefault();
return false;
return;
}
if (changeKey === '1') {
// 上下滚动
return;
}
if (touch.startX < contentWidth / 4 && touch.count <= 0) {
// 当前为第一页
return;
}
if (touch.startX < contentWidth / 4 ) {
// 向上翻页
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进行缓存，这个也比较简单，就不介绍了。
关于整个阅读器主要功能已经开发完成，但是真正的放在整个小说软件内与接口联调，还有不小的工作量，因为时间原因，这个也不展开介绍了。
阅读器皮肤效果图：
阅读器字体效果图：
有需要阅读器的源码可以留言或者私聊，后期的话，会把更加完善的代码放在GitHub上，然后将下载地址更新到此博文内，有需要的记得关注、或者收藏此文章。
下周有时间的话，可能会出一篇《团队开发过程中的Git相关的使用》，带你解析微信小程序中智能聊天机器人的接入过程。