❤️一文掌握HTML+CSS+JS开发小说阅读器❤️ |
您所在的位置：网站首页 › 电脑自动翻页小说阅读器怎么设置的 › ❤️一文掌握HTML+CSS+JS开发小说阅读器❤️ |
❤️一文掌握HTML+CSS+JS开发小说阅读器❤️
|
上周《让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_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 |
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |