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

2021年09月24日 12:51

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

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

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

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

关于阅读器功能的划分主要参考了起点读书及微信读书小程序及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)');

});
复制代码