现在手机上的文本阅读app已经非常丰富,良好的阅读体验与海量的书库常常令我感到无比兴奋。
我想到8年前用一点几寸屏幕的mp3看电子书的情景,顿生一种淡淡的温馨。再久远一些,小的时候,我也经常和小伙伴们组团去书店看白书,也就是白看书。古老的木质书架上那一叠叠厚重的黄皮小说书,在年幼的我眼里仿佛是比盘子里的午餐肉更加美味可口的东西。
而在当今这个信息化的时代,看书变得空前的便利,可是儿时那种期待和兴奋的感受却消失在了时间的长河。
岁月在流逝,时代在进步。
愿放下所有的浮躁,在新的时代愉快地生活,无所谓明天怎样,我都相信肯定比今天更好。
本文以一个网页版阅读器作为案例,展示JavaScript中,对滚动条的一些处理,这是完成以后的样子:
当我滚动条往上滚动的时候,屏幕右下角会出现一个向上的箭头:
而往下滚动的时候,又自动消失。
当我点击这个半透明的箭头按钮,就会自动滑动到章节的最顶端。
本章就实现这个小功能。
开发工具:HBuilder(个人喜欢,顺从潮流放弃了使用大半年的EditPlus,不过EditPlus确实锻炼了我拼写单词的能力)
测试环境:谷歌浏览器
1. 页面布局与绘制
我们写一个基本的html模板
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TextReader</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style type="text/css"> *{ padding: 0; margin: 0; } </style> </head> <body> </body> </html>
接着,我们把背景图片引入进来(尺寸略有调整):
body{ background: url(bg.jpg) no-repeat; background-size: 100%; }
我们先写一个div,作为盛放整个手机的父容器。
在它的css样式中,我们做了居中定位(水平)。
.phone { width:322px ; height:550px; position:relative; left:35%; top:35px; background: #66CC00; } <div class='phone'></div>
接下来,引入上下两端的样式图片。
其实,手机的顶部和底部就是两张图片:
我们先把顶部图片引入进来,在引入图片之前,先画两个div来盛放图片。
<body> <div class='phone'> <div class='phone_top'></div> <div class='phone-bottom'></div> </div> </body>
然后,通过背景图的方式把图片贴进来。
.phone .phone_top { background: url(phone_top.png); height:42px; } .phone .phone-bottom { background: url(phone_bottom.png); position: absolute; height: 42px; width: 100%; bottom: 0; }
这样一来,一个手机的大概模子就出来了,接下来,我们把屏幕区域加上去。
.phone .container{ overflow-x: hidden; overflow-y: auto; width:90%; background:#ccc; height:456px; font-size:14px; text-align:left; background:#dcf3dc; font-family:微软雅黑; color:#555; line-height:28px; padding:16px; text-indent: 2em; padding: 16px 16px 0px 16px; } <body> <div class='phone'> <div class='phone_top'></div> <div class='container'></div> <div class='phone-bottom'></div> </div> </body>
OK,现在可以把父容器的背景色给去掉了。
background: #66CC00; //去掉
为了把手机模型做得更像一点,我们手动给它加一个按钮,额,就手动画一个吧。
.back { width: 30px; height: 30px; position: absolute; left: 50%; margin-left: -15px; border: 2px solid #c7bcbc; top: 4px; border-radius: 50%; } <div class='phone-bottom'> <span class='back'></span> </div>
虽然span是行内元素,但是因为我们给它设置了 position: absolute , 所以宽度和高度依然是起作用的。
我也是在写这个案例的时候无意中发现的,我以前一直以为需要手动给行内元素升级为块级元素才行。
这样,我们的页面布局差不多久完成啦。
2. 文字部分设计与美化
接下来,我们给阅读器模拟一些数据。
<body> <div class='phone'> <div class='phone_top'></div> <div class='container'> <h4>刀剑神域 </h4> <p> 在一群好奇心旺盛的高手花了整整一个月测量后,发现最底层区域的直径大约有十公里,足以轻松容纳下整个世田谷区。再加上堆积在上面百层左右的楼层,其宽广的程度可说超乎想像。整体的档案量大到根本无法测量。 这样的空间内部有好几个都市、为数众多的小型街道与村落、森林和草原,甚至还有湖的存在。而连接每个楼层之间的阶梯只有一座,阶梯还都位于充斥怪物的危险迷宫区域之中,因此要发现并通过阶梯可以说是相当困难。但只要有人能够突破阻碍抵达上面的楼层,上下层各都市的「转移门」便会连结起来,人们也就可以自由来去两个楼层之间。 </p> <p> 经过两年的时间,这个巨大城堡就这样被逐渐地往上攻略,目前已到达第七十四层。城堡的名称是「艾恩葛朗特」。这座持续飘浮在空中、吞噬了将近六千人,充满着剑与战斗的世界。它的另一个名字是——SwordArtOnline刀剑神域」。闪烁着深灰色光芒的剑尖,浅浅地划过我的肩膀。 那固定显示在视线左上角的细长横线,好不容易缩短了长度。同时,似乎有只冰冷的手掌,抚摸过我胸口深处。 </p> <p> 横线——那称为HP条的蓝色条状物,可以看出我的生命残值。虽然它还有八成左右的残值,但不能把事情看得太过于乐观。因为相对来说,我已经朝死亡深渊前进了两步。 在敌人的剑再度进入攻击动作之前,我就先往后跳开一大步,以保持与敌人之间的距离。 </p> <p>「呼……」 </p> <p>硬是吐了一大口气来调整一下气息。在这个世界的「身体」虽然不需要氧气,但在另一边,也就是躺在真实世界里的真正身体,现在呼吸应该非常剧烈。而随意摆放的手应该正流着大量冷汗,心跳也加速到破表了吧。 </p> <p>这也是理所当然的事。就算我眼前所见全部都是虚拟的立体影像对象,减少的也只是数值化的生命值,但我现在的确是赌上自己的性命在战斗。 从赌上性命这点来看,这场战斗真是相当不公平。因为,眼前的「敌人」——这除了拥有闪耀着光芒的深绿鳞片皮肤与长手臂外,还有着蜥蜴头与尾巴的半人半兽怪物,不只外表不是人类、甚至没有真实的生命。它只不过是不论被杀掉多少次,都可以由系统无限重生的数字文件档案集合体。 </p> <p>不对。 目前,操纵这只蜥蜴人的AI程序正在观察、学习我的战斗方式,用以不断提升自己的应对能力。但这些学习档案,在该个体消灭后便会重置,而且不会反馈到下次出现在这个区域的同种个体上。 </p> </div> <div class='phone-bottom'> <span class='back'></span> </div> </div> </body>
滚动条的样式不太美观,我们将其美化一下
/** 滚动条样式美化 */ ::-webkit-scrollbar{width:5px;height:6px;background:#ccc;} ::-webkit-scrollbar-button{background-color:#e5e5e5;} ::-webkit-scrollbar-track{background:#999;} ::-webkit-scrollbar-track-piece{background:#ccc} ::-webkit-scrollbar-thumb{background:#666;} ::-webkit-scrollbar-corner{background:#82AFFF;} ::-webkit-scrollbar-resizer{background:#FF0BEE;} scrollbar{-moz-appearance:none !important;background:rgb(0,255,0) !important;} scrollbarbutton{-moz-appearance:none !important;background-color:rgb(0,0,255) !important;} scrollbarbutton:hover{-moz-appearance:none !important;background-color:rgb(255,0,0) !important;}
这样就好看多了。
标题部分有一点突兀,我们给出四条美化的建议:
1. 标题居左对齐
2. 底部画一条线,与小说正文分开,并且空开一些。
3. 字体颜色稍微淡一些,不要太黑
4. 字间稍微距大一些
于是
.phone .container h4 { text-indent: 0; margin-bottom: 1em; color:#736357; border-bottom:1px solid #736357; letter-spacing: 2px; }
这样好看一些了吧,当然,每个人审美观不同啦,你也可以调成自己喜欢的样式。
段落之间和文字间距都太小了,我们也调一下,不要那么小气嘛,哈哈。
.phone .container p { margin-bottom: 15px; letter-spacing: 2px; }
恩,好多了。
我们准备了一张半透明的箭头图标,现在将其引入。
<body> <div class='phone'> <div class='phone_top'></div> <div class='container'> <span id='toTop'></span> <h4>刀剑神域</h4> <p> 在一群好奇心旺盛的高手花了整整一个月测量后,发现最底层区域的直径大约有十公里,足以轻松容纳下整个世田谷区。再加上堆积在上面百层左右的楼层,其宽广的程度可说超乎想像。整体的档案量大到根本无法测量。 这样的空间内部有好几个都市、为数众多的小型街道与村落、森林和草原,甚至还有湖的存在。而连接每个楼层之间的阶梯只有一座,阶梯还都位于充斥怪物的危险迷宫区域之中,因此要发现并通过阶梯可以说是相当困难。但只要有人能够突破阻碍抵达上面的楼层,上下层各都市的「转移门」便会连结起来,人们也就可以自由来去两个楼层之间。 </p> <p> 经过两年的时间,这个巨大城堡就这样被逐渐地往上攻略,目前已到达第七十四层。城堡的名称是「艾恩葛朗特」。这座持续飘浮在空中、吞噬了将近六千人,充满着剑与战斗的世界。它的另一个名字是——SwordArtOnline刀剑神域」。闪烁着深灰色光芒的剑尖,浅浅地划过我的肩膀。 那固定显示在视线左上角的细长横线,好不容易缩短了长度。同时,似乎有只冰冷的手掌,抚摸过我胸口深处。 </p> <p> 横线——那称为HP条的蓝色条状物,可以看出我的生命残值。虽然它还有八成左右的残值,但不能把事情看得太过于乐观。因为相对来说,我已经朝死亡深渊前进了两步。 在敌人的剑再度进入攻击动作之前,我就先往后跳开一大步,以保持与敌人之间的距离。 </p> <p>「呼……」 </p> <p>硬是吐了一大口气来调整一下气息。在这个世界的「身体」虽然不需要氧气,但在另一边,也就是躺在真实世界里的真正身体,现在呼吸应该非常剧烈。而随意摆放的手应该正流着大量冷汗,心跳也加速到破表了吧。 </p> <p>这也是理所当然的事。就算我眼前所见全部都是虚拟的立体影像对象,减少的也只是数值化的生命值,但我现在的确是赌上自己的性命在战斗。 从赌上性命这点来看,这场战斗真是相当不公平。因为,眼前的「敌人」——这除了拥有闪耀着光芒的深绿鳞片皮肤与长手臂外,还有着蜥蜴头与尾巴的半人半兽怪物,不只外表不是人类、甚至没有真实的生命。它只不过是不论被杀掉多少次,都可以由系统无限重生的数字文件档案集合体。 </p> <p>不对。 目前,操纵这只蜥蜴人的AI程序正在观察、学习我的战斗方式,用以不断提升自己的应对能力。但这些学习档案,在该个体消灭后便会重置,而且不会反馈到下次出现在这个区域的同种个体上。 </p> </div> <div class='phone-bottom'> <span class='back'></span> </div> </div> </body>
样式如下:
.phone .container #toTop { width: 40px; height: 60px; display: inline-block; position: absolute; background: url(top.png) no-repeat; background-size: 100%; bottom:80px; right: 15px; opacity: 0.7; }
引进来了。
我们通过jQuery的animate方法来实现回到顶部的动画,实现该功能的核心逻辑就是控制滚动条距离顶部的高度,也就是scrollTop,让它变为0就可以了。
//单机图标直接返回顶部 $('#toTop').on('click',function(){ $('.phone .container').eq(0).stop(true, true).animate({ scrollTop: 0},500,function(){ $('#toTop').css({'opacity' : 0}); }); return false; });
最后,我们还希望实现的一个效果就是,只有在滚动条往上拖动的时候,才把按钮显示出来,否则就隐藏该按钮。毕竟,我们在阅读的时候都不希望一直有个小图标吧。
实现思路也很简单,就是判断当前滚动条到底是向上滚动呢,还是向下滚动?
然后设置按钮的透明度就行了,这时候,我们需要对滚动条进行监听,如果向上滚动就显示按钮,否则隐藏按钮,实现代码如下:
var justScrollTop = 0; //记录上一次滚动条距离顶部的位置 //滚动条监听事件 $('.phone .container').on('scroll',function(e){ if(e.target.scrollTop > justScrollTop){ $('#toTop').css({'opacity' : 0}); //隐藏 }else{ $('#toTop').css({'opacity' : 0.8}); //显示 } justScrollTop = e.target.scrollTop; });
效果:
如果有没看明白的地方,欢迎在下面评论,或者私信我,都可以。
如果有必要,我会在下一期通过举例子的方式做解答。
在寻找新的电子书阅读软件吗?来看看这四款适用于安卓的可靠的开源电子书阅读器吧。
• 来源:linux.cn • 作者:Scott Nesbitt • 译者:chenmu-kk •
(本文字数:2156,阅读时长大约:3 分钟)
谁不想有一个好的阅读体验?与其将时间浪费在社交媒体或 即时消息软件 上,不如在自己的安卓手机或平板上阅读一本书、杂志或其他文档。
要做到这一点,你需要的是一个适合的电子书阅读软件。接下来让我们来看一看四款可靠的、开源安卓电子书阅读器。
那我们先从我最喜欢的一款开源安卓电子书阅读器开始: Book Reader 。它基于现在专有的 FBReader 应用的开源老版本。像 FBReader 的早期版本一样,Book Reader 小而简单,但是好用。
优点:
缺点
支持的电子书格式:
Book Reader 支持 EPUB、.mobi、PDF、 DjVu 、HTML、纯文本、 Word 文档、RTF 和 FictionBook 。
Book Reader Android app
Book Reader 的源码在 GNU GPL 3.0 下授权,你可以在 GitLab 中找到它。
Cool Reader 是一个灵活易用的电子书软件。虽然我觉得该软件的图标会让想起 Windows vista 中的图标,但它确实有一些好用的功能。
优点
缺点
支持的电子书格式:
你可以使用 Cool Reader 来浏览 EPUB、小说、纯文本、RTF、HTML、 CHM 和 TCR(Psion 系列掌上电脑的电子书格式)文件。
Cool Reader Android app
Cool Reader 的源码在 GNU GPL 2 下授权,你可以在 Sourceforge 中找到它。
KOReader 最初是为了 E Ink 电子书阅读器创建的,但后来发现它可用于安卓。在测试它时,我发现 KOReader 在同等程度下既有用又令人沮丧。很明显它绝不是一款不好的应用,但不会是我的首选。
优点
缺点
支持的电子书格式:
你可以查阅 PDF、DjVu、CBT、以及 CBZ 电子书。它也支持 EPUB、小说、.mobi、Word 文档、文本文件和 CHM 文件。
KOReader Android app
Cool Reader 的源码在 GNU Affero GPL 3.0 下授权,你可以在 GitHub 上找到它。
是的,这确实是 这款电子书阅读器 的名字。它是这篇文章中最基础的电子书阅读器,但不要因此(或者这个傻乎乎的名字)使你失望。Booky McBookface 易于使用,并且有一件事它做的很好。
优点
缺点
支持的电子书格式
你可以使用该软件阅读 EPUB 格式、HTML 文档,或纯文本格式的电子书。
Booky McBookface Android app
Booky McBookface 的源码在 GNU GPL 3.0 下授权,你可以在 GitHub 中找到它。
你有最喜欢的安卓开源电子书阅读器吗?在社区中留言分享一下吧。
via: opensource.com
作者: Scott Nesbitt 选题: lujun9972 译者: chenmu-kk 校对: wxy
本文由 LCTT 原创编译, Linux中国 荣誉推出
互联网非常发达,智能手机几乎可以承担一切的今天,我们仍然可以看到,电纸书这个品类始终都有着它很稳定的受众人群,一直都没有被替代。
一方面,对于喜欢看书的人而言,电纸书有着非常丰富的资源,并且,由于显示原理的不同,电纸书不会有蓝光问题,极大地避免了长时间阅读时屏幕对人眼的伤害。
而且,对于需要经常出差,或者每天都要花很长时间都在通勤路上的人而言,电纸书也是个打法时间的好方法,还比玩手机更有价值。
对于在工作、生活、学习中需要大量阅读文字的人,电纸书相比于普通平板,在尺寸、重量上都更舒适,阅读体验也更好。
虽然电纸书的优点很多,但是,传统电纸书也有不少令人诟病的地方,比如之前某个很有名的海外电纸书品牌,卖的很火,但是就是由于生态太封闭了,只能从固定的渠道买书,如果要往进装自己下载的小说、pdf文件等都很麻烦,版权书库也不全。而对于其他品牌的一些电纸书产品,大部分的性能表现又着实有点一般,有时候反应慢到让人怀疑人生——久而久之,慢慢地都变成「盖泡面神器」了......
而如果你打算买一款电纸书的话,我强烈建议你试试我最近在玩的「汉王Clear」。
首先,汉王Clear,上手的第一感受就是轻,这么大一块的7英寸屏幕,整机却还才175g,比现在主流的智能手机和平板都要轻不少,而且它的厚度做的也很薄,最薄处仅3.9mm,可以说是非常的纤巧了。
另外它还有个我觉得很巧妙的设计——有按键的握持侧底面底面要比旁边厚一些,这种思路有点像相机侧面的握把。波浪纹设计的加入也让整机的握持感更舒服一些、也防滑。
外观方面最让我惊喜的,应该就是Type-C接口了。之前在我的印象中,像电纸书这个品类,应该还有不少产品在使用上古的micro USB接口,没想到Type-C接口已经在电纸书上普及开来了。
这台电纸书的流畅度,在我实际使用下来,还是有点出乎意料的,反应速度很快,这得益于机身内置了一颗强大的四核处理器,最高4GB的运存,在墨水屏阅读器领域可以说是非常强悍的存在了。对于内存需求较大的用户,还可以选购高达64GB存储的高配版,一般来说标配就已经够用了。
流畅性的体验在搭配按键使用的时候感知更为明显。虽然因为墨水屏刷新的特性,没法和手机等传统电子设备比,但我个人感觉要比之前用过的几款墨水屏设备更流畅一些。
续航上,汉王Clear非常的好,按我的使用习惯,2400mAh的电池充满一次可以用很长时间。上次充满电用了3天之后,现在还有80%多的电量。另外,平板在一段时间不用之后,也会自动关机来进一步降低功耗,以提升续航;平时不用的时候待机锁屏就好,墨水屏本身就是个非常低功耗的屏幕,不用担心出差出远门频繁充电的问题。
在系统体验上,汉王Clear的一大特点就是开放式系统。除了几个系统预装APP之外,还自带应用市场,可以安装其他的第三方APP,起点、晋江、微博、网易新闻、UC浏览器、百度网盘、甚至是微信都可以安装使用。虽然软件种类和数量不如普通平板丰富,但在「电纸书」这个领域里算是个绝对的「遥遥领先」了。
除了应用市场,还内置了汉王、微信、京东读书、当当在内的4大在线书城,你还可以下载其他的第三方书城App,无需担心图书资源的问题。出厂自带了1200+本优质本地图书,中外名著、畅销小说等一应俱全。
另一个比较有意思的是,汉王Clear还内置了一个AI助手,类似之前很火的ChatGPT,除了让它帮忙搜集一些内容外,还可以用它来辅助写作,在休闲娱乐的同时还兼顾了一定的生产力,也算是一个小甜头。
在内容方面,除了国内互联网上的内容外,日式轻小说,漫画等也有不少的爱好者。也因此,往电纸书上导这些数据对于很多人来说都是家常便饭了。这点不得不夸一下汉王Clear,在数据传输这点上,汉王Clear主打的就是一个无死角覆盖——
Wi-Fi传书。电纸书和电脑、手机等设备处于同一局域网时,在浏览器输入网址或手机扫码就可以往电纸书上传文件的。
微信传书。这个功能对于一些微信扫码和电纸书绑定之后,微信内长按文件-打开-选择接收设备,就可以将文件传输至电纸书。
扫描王传输。这个功能我认为很适合工作党使用,将电纸书和汉王扫描王APP绑定后,手机扫描纸质版生成的电子文件可以直接分享给电纸书查看。
百度网盘。登录百度网盘之后可以直接将资源下载到电纸书上查看。
最后一个,则是我们传统的有线传输。
就传输数据文件这件事来说,汉王Clear挺有诚意的,已经足够绝大部分人使用了。除了能方便地传输文件,它所支持的格式也是非常的丰富,数10种核心的文件格式都支持,甚至于像PPTX、XLSX、EPUB、HTML等也都支持。机器内置的 “自研解析核心”,则可以深度优化不同格式文档的阅读性能,从而精准地进行呈现和排版。
在屏幕上,汉王Clear采用的墨水屏和常规电子设备的LCD、OLED屏幕不同,它本身不发光,而是通过反射环境光来达到显示效果的。所以相比于常规的电子设备显示屏,无蓝光,基本不会对人眼造成伤害,“类纸”的显示感受,仿佛在翻读一本实体书,这种体验是你拿着一台手机或者iPad看书所无法比拟的。
你还可以使用机器自带的「听书」功能,开车的时候听一听,轻松又解压。里面有5款AI的人声,我实测了一下,声音很细腻,可以调整不同的快慢节奏,并且设置好定时,喜欢睡前听书入睡的朋友,以后就可以用它来陪你入睡安眠啦。
机身内置了高达15种不同的字体,完全免费,在阅读不同风格、题材的作品的时候,换一换不同的字体风格,有完全不同的心境体验。
在阅读外文书籍的时候,内置了10余本的词典,长按就可以进行“生词快速翻译”,学生党们如果是用读外文书来记忆单词的话,还可以加入“生词本”保存,以后单独地把生词本拿出来背诵复习,堪称是学语言的神器了。
在阅读过程中,你可以随时给当前页添加“书签”,直接在书签列表可以快捷跳转对应的界面,像极了在阅读传统书的时候通过“折书角”的方法来标注重点。阅读时,遇到不错的段落,还可以长按进行摘抄、保存,像我们最常用的 PDF、EPUB、MOBI、TXT、CHM在内的文件格式都是支持这个功能的。
另外,为了保证多场景下的显示效果,厂商一般也会在墨水屏下方内置光源来辅助阅读。在汉王Clear上也不例外,它内置有冷暖双色温光源。默认有三种模式可调,分别为熄灯、白天、夜间。同时还有一个自定义选项。可以按照个人的使用习惯来调整屏幕的色温和亮度,以获得最佳的使用体验。
汉王Clear这块7英寸的屏幕分辨率为1680×1264,换算之后ppi达到了300。对于一块7英寸的小平板来说,这个数据足够了。实际使用时,不论是系统UI还是第三方APP,目前我都没有碰到过模糊的情况,文字的边缘整体都非常的锐利、清晰;尤其是配合上它的这块“微晶蚀刻技术”的全贴合工艺玻璃盖板,观感更加通透,清晰度的体验比我之前上手过的其他墨水屏产品提升了不少。
而且,这块屏幕单单灰度的呈现上都有高达256级的灰阶显示效果,可以让每个画面都看着更栩栩如生,尤其是在观看一些漫画作品时,不会出现其他电子书产品的局部“死黑”“死灰”,看不清楚的情况,真正做到了灰色呈现的“阶梯分明”。
交互方面我觉得也有必要单独拿出来说一说——
汉王Clear采用的是实体按键的设计,在握持侧有三颗按键,在桌面时上下键可以用来调节音量,如果是看书看漫画则可用来翻页,中间键则是返回。如果是长按中间的返回键,还可以实现“快速刷新”的功能。开启了重力感应之后,左右手的按键也会自动地进行切换。
这样的实体翻页键还有个好处,就是频繁地翻页不会觉得“累手”,翻页的速度也会明显比触屏使用更快。
搭配触摸屏使用,个人感觉会比“只有触摸屏”功能的产品体验会更好一些。当然,这三颗按键也支持在设置中进行自定义,大家可以按照自己的需求进行调整。
其他方面,重力感应应该是考虑到了左/右撇子的使用习惯,不管左手还是右手都能很舒适的握持。在功能上汉王Clear做的还是挺齐全的,是个完成度非常高的产品。
总结一下,作为一款定价千元左右的电纸书,汉王Clear确实是个比较全能型的产品,90%以上的使用需求它都可以满足,各种功能也都给的很全面,甚至有现在很火爆的AI助手,结合1399/1599元的售价,我觉得这款产品还是挺值的。
最后,如果你经常看小说、漫画,或者需要长时间阅读文稿,那么汉王Clear会是一个很合适的选项,长续航、不伤眼、接近真实纸张的阅读体验,这些都是普通平板所不具备的。
*请认真填写需求信息,我们会在24小时内与您取得联系。