现在手机上的文本阅读app已经非常丰富,良好的阅读体验与海量的书库常常令我感到无比兴奋。

我想到8年前用一点几寸屏幕的mp3看电子书的情景,顿生一种淡淡的温馨。再久远一些,小的时候,我也经常和小伙伴们组团去书店看白书,也就是白看书。古老的木质书架上那一叠叠厚重的黄皮小说书,在年幼的我们眼里仿佛是比盘子里的午餐肉更加美味可口的东西。

而在当今这个信息化的时代,看书变得空前的便利,可是儿时那种期待和兴奋的感受却消失在了时间的长河。

岁月在流逝,时代在进步。

愿放下所有的浮躁,在新的时代愉快地生活,无所谓明天怎样,我都相信肯定比今天更好。

本文以一个网页版阅读器作为案例,展示JavaScript中,对滚动条的一些处理,这是完成以后的样子:

当我滚动条往上滚动的时候,屏幕右下角会出现一个向上的箭头:


而往下滚动的时候,又自动消失。

当我点击这个半透明的箭头按钮,就会自动滑动到章节的最顶端。

本章就实现这个小功能。

开发工具:HBuilder(个人喜欢,顺从潮流放弃了使用大半年的EditPlus,不过EditPlus确实锻炼了我拼写单词的能力)

测试环境:谷歌浏览器
正文
1. 页面布局与绘制

我们写一个基本的html模板

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>TextReader</title>
  6. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  7.  
  8. <style type="text/css">
  9. *{
  10. padding: 0;
  11. margin: 0;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16.  
  17. </body>
  18. </html>

接着,我们把背景图片引入进来(尺寸略有调整):

  1. body{
  2. background: url(bg.jpg) no-repeat;
  3. background-size: 100%;
  4. }

我们先写一个div,作为盛放整个手机的父容器。
在它的css样式中,我们做了居中定位(水平)。

  1. .phone {
  2. width:322px ;
  3. height:550px;
  4. position:relative;
  5. left:35%;
  6. top:35px;
  7. background: #66CC00;
  8. }
  1. <div class='phone'></div>

接下来,引入上下两端的样式图片。

其实,手机的顶部和底部就是两张图片:

我们先把顶部图片引入进来,在引入图片之前,先画两个div来盛放图片。

  1. <body>
  2. <div class='phone'>
  3. <div class='phone_top'></div>
  4.  
  5. <div class='phone-bottom'></div>
  6. </div>
  7. </body>

然后,通过背景图的方式把图片贴进来。

  1. .phone .phone_top {
  2. background: url(phone_top.png);
  3. height:42px;
  4. }
  5.  
  6. .phone .phone-bottom {
  7. background: url(phone_bottom.png);
  8. position: absolute;
  9. height: 42px;
  10. width: 100%;
  11. bottom: 0;
  12. }


这样一来,一个手机的大概模子就出来了,接下来,我们把屏幕区域加上去。

  1. .phone .container{
  2. overflow-x: hidden;
  3. overflow-y: auto;
  4. width:90%;
  5. background:#ccc;
  6. height:456px;
  7. font-size:14px;
  8. text-align:left;
  9. background:#dcf3dc;
  10. font-family:微软雅黑;
  11. color:#555;
  12. line-height:28px;
  13. padding:16px;
  14. text-indent: 2em;
  15. padding: 16px 16px 0px 16px;
  16. }
  1. <body>
  2. <div class='phone'>
  3. <div class='phone_top'></div>
  4. <div class='container'></div>
  5. <div class='phone-bottom'></div>
  6. </div>
  7. </body>

OK,现在可以把父容器的背景色给去掉了。

  1. background: #66CC00; //去掉

为了把手机模型做得更像一点,我们手动给它加一个按钮,额,就手动画一个吧。

  1. .back {
  2. width: 30px;
  3. height: 30px;
  4. position: absolute;
  5. left: 50%;
  6. margin-left: -15px;
  7. border: 2px solid #c7bcbc;
  8. top: 4px;
  9. border-radius: 50%;
  10. }
  1. <div class='phone-bottom'>
  2. <span class='back'></span>
  3. </div>


虽然span是行内元素,但是因为我们给它设置了 position: absolute , 所以宽度和高度依然是起作用的。

我也是在写这个案例的时候无意中发现的,我以前一直以为需要手动给行内元素升级为块级元素才行。

这样,我们的页面布局差不多久完成啦。
2. 文字部分设计与美化

接下来,我们给阅读器模拟一些数据。

  1. <body>
  2. <div class='phone'>
  3. <div class='phone_top'></div>
  4. <div class='container'>
  5. <h4>刀剑神域 </h4>
  6. <p>
  7. 在一群好奇心旺盛的高手花了整整一个月测量后,发现最底层区域的直径大约有十公里,足以轻松容纳下整个世田谷区。再加上堆积在上面百层左右的楼层,其宽广的程度可说超乎想像。整体的档案量大到根本无法测量。 这样的空间内部有好几个都市、为数众多的小型街道与村落、森林和草原,甚至还有湖的存在。而连接每个楼层之间的阶梯只有一座,阶梯还都位于充斥怪物的危险迷宫区域之中,因此要发现并通过阶梯可以说是相当困难。但只要有人能够突破阻碍抵达上面的楼层,上下层各都市的「转移门」便会连结起来,人们也就可以自由来去两个楼层之间。
  8. </p>
  9. <p>
  10. 经过两年的时间,这个巨大城堡就这样被逐渐地往上攻略,目前已到达第七十四层。城堡的名称是「艾恩葛朗特」。这座持续飘浮在空中、吞噬了将近六千人,充满着剑与战斗的世界。它的另一个名字是——SwordArtOnline刀剑神域」。闪烁着深灰色光芒的剑尖,浅浅地划过我的肩膀。 那固定显示在视线左上角的细长横线,好不容易缩短了长度。同时,似乎有只冰冷的手掌,抚摸过我胸口深处。
  11. </p>
  12. <p>
  13. 横线——那称为HP条的蓝色条状物,可以看出我的生命残值。虽然它还有八成左右的残值,但不能把事情看得太过于乐观。因为相对来说,我已经朝死亡深渊前进了两步。 在敌人的剑再度进入攻击动作之前,我就先往后跳开一大步,以保持与敌人之间的距离。
  14. </p>
  15. <p>「呼……」
  16. </p>
  17. <p>硬是吐了一大口气来调整一下气息。在这个世界的「身体」虽然不需要氧气,但在另一边,也就是躺在真实世界里的真正身体,现在呼吸应该非常剧烈。而随意摆放的手应该正流着大量冷汗,心跳也加速到破表了吧。 </p>
  18.  
  19. <p>这也是理所当然的事。就算我眼前所见全部都是虚拟的立体影像对象,减少的也只是数值化的生命值,但我现在的确是赌上自己的性命在战斗。 从赌上性命这点来看,这场战斗真是相当不公平。因为,眼前的「敌人」——这除了拥有闪耀着光芒的深绿鳞片皮肤与长手臂外,还有着蜥蜴头与尾巴的半人半兽怪物,不只外表不是人类、甚至没有真实的生命。它只不过是不论被杀掉多少次,都可以由系统无限重生的数字文件档案集合体。 </p>
  20. <p>不对。 目前,操纵这只蜥蜴人的AI程序正在观察、学习我的战斗方式,用以不断提升自己的应对能力。但这些学习档案,在该个体消灭后便会重置,而且不会反馈到下次出现在这个区域的同种个体上。
  21. </p>
  22.  
  23. </div>
  24. <div class='phone-bottom'>
  25. <span class='back'></span>
  26. </div>
  27. </div>
  28. </body>

滚动条的样式不太美观,我们将其美化一下

/** 滚动条样式美化  */

  1. ::-webkit-scrollbar{width:5px;height:6px;background:#ccc;}
  2. ::-webkit-scrollbar-button{background-color:#e5e5e5;}
  3. ::-webkit-scrollbar-track{background:#999;}
  4. ::-webkit-scrollbar-track-piece{background:#ccc}
  5. ::-webkit-scrollbar-thumb{background:#666;}
  6. ::-webkit-scrollbar-corner{background:#82AFFF;}
  7. ::-webkit-scrollbar-resizer{background:#FF0BEE;}
  8. scrollbar{-moz-appearance:none !important;background:rgb(0,255,0) !important;}
  9. scrollbarbutton{-moz-appearance:none !important;background-color:rgb(0,0,255) !important;}
  10. scrollbarbutton:hover{-moz-appearance:none !important;background-color:rgb(255,0,0) !important;}

这样就好看多了。

标题部分有一点突兀,我们给出四条美化的建议:

1. 标题居左对齐
2. 底部画一条线,与小说正文分开,并且空开一些。
3. 字体颜色稍微淡一些,不要太黑
4. 字间稍微距大一些

于是

  1. .phone .container h4 {
  2. text-indent: 0;
  3. margin-bottom: 1em;
  4. color:#736357;
  5. border-bottom:1px solid #736357;
  6. letter-spacing: 2px;
  7. }

这样好看一些了吧,当然,每个人审美观不同啦,你也可以调成自己喜欢的样式。

段落之间和文字间距都太小了,我们也调一下,不要那么小气嘛,哈哈。

  1. .phone .container p {
  2. margin-bottom: 15px;
  3. letter-spacing: 2px;
  4. }

恩,好多了。
3. 引入向上的箭头图标

我们准备了一张半透明的箭头图标,现在将其引入。

  1. <body>
  2. <div class='phone'>
  3. <div class='phone_top'></div>
  4. <div class='container'>
  5.  
  6. <span id='toTop'></span>
  7.  
  8. <h4>刀剑神域</h4>
  9. <p>
  10. 在一群好奇心旺盛的高手花了整整一个月测量后,发现最底层区域的直径大约有十公里,足以轻松容纳下整个世田谷区。再加上堆积在上面百层左右的楼层,其宽广的程度可说超乎想像。整体的档案量大到根本无法测量。 这样的空间内部有好几个都市、为数众多的小型街道与村落、森林和草原,甚至还有湖的存在。而连接每个楼层之间的阶梯只有一座,阶梯还都位于充斥怪物的危险迷宫区域之中,因此要发现并通过阶梯可以说是相当困难。但只要有人能够突破阻碍抵达上面的楼层,上下层各都市的「转移门」便会连结起来,人们也就可以自由来去两个楼层之间。
  11. </p>
  12. <p>
  13. 经过两年的时间,这个巨大城堡就这样被逐渐地往上攻略,目前已到达第七十四层。城堡的名称是「艾恩葛朗特」。这座持续飘浮在空中、吞噬了将近六千人,充满着剑与战斗的世界。它的另一个名字是——SwordArtOnline刀剑神域」。闪烁着深灰色光芒的剑尖,浅浅地划过我的肩膀。 那固定显示在视线左上角的细长横线,好不容易缩短了长度。同时,似乎有只冰冷的手掌,抚摸过我胸口深处。
  14. </p>
  15. <p>
  16. 横线——那称为HP条的蓝色条状物,可以看出我的生命残值。虽然它还有八成左右的残值,但不能把事情看得太过于乐观。因为相对来说,我已经朝死亡深渊前进了两步。 在敌人的剑再度进入攻击动作之前,我就先往后跳开一大步,以保持与敌人之间的距离。
  17. </p>
  18. <p>「呼……」
  19. </p>
  20. <p>硬是吐了一大口气来调整一下气息。在这个世界的「身体」虽然不需要氧气,但在另一边,也就是躺在真实世界里的真正身体,现在呼吸应该非常剧烈。而随意摆放的手应该正流着大量冷汗,心跳也加速到破表了吧。 </p>
  21.  
  22. <p>这也是理所当然的事。就算我眼前所见全部都是虚拟的立体影像对象,减少的也只是数值化的生命值,但我现在的确是赌上自己的性命在战斗。 从赌上性命这点来看,这场战斗真是相当不公平。因为,眼前的「敌人」——这除了拥有闪耀着光芒的深绿鳞片皮肤与长手臂外,还有着蜥蜴头与尾巴的半人半兽怪物,不只外表不是人类、甚至没有真实的生命。它只不过是不论被杀掉多少次,都可以由系统无限重生的数字文件档案集合体。 </p>
  23. <p>不对。 目前,操纵这只蜥蜴人的AI程序正在观察、学习我的战斗方式,用以不断提升自己的应对能力。但这些学习档案,在该个体消灭后便会重置,而且不会反馈到下次出现在这个区域的同种个体上。
  24. </p>
  25.  
  26. </div>
  27. <div class='phone-bottom'>
  28. <span class='back'></span>
  29. </div>
  30. </div>
  31. </body>

样式如下:

  1. .phone .container #toTop {
  2. width: 40px;
  3. height: 60px;
  4. display: inline-block;
  5. position: absolute;
  6. background: url(top.png) no-repeat;
  7. background-size: 100%;
  8. bottom:80px;
  9. right: 15px;
  10. opacity: 0.7;
  11. }

引进来了。
4. js控制

我们通过jQuery的animate方法来实现回到顶部的动画,实现该功能的核心逻辑就是控制滚动条距离顶部的高度,也就是scrollTop,让它变为0就可以了。

//单机图标直接返回顶部

  1. $('#toTop').on('click',function(){
  2. $('.phone .container').eq(0).stop(true, true).animate({ scrollTop: 0},500,function(){
  3. $('#toTop').css({'opacity' : 0});
  4. });
  5.  
  6. return false;
  7. });

最后,我们还希望实现的一个效果就是,只有在滚动条往上拖动的时候,才把按钮显示出来,否则就隐藏该按钮。毕竟,我们在阅读的时候都不希望一直有个小图标吧。

实现思路也很简单,就是判断当前滚动条到底是向上滚动呢,还是向下滚动?

然后设置按钮的透明度就行了,这时候,我们需要对滚动条进行监听,如果向上滚动就显示按钮,否则隐藏按钮,实现代码如下:

var justScrollTop = 0; //记录上一次滚动条距离顶部的位置

//滚动条监听事件

  1. $('.phone .container').on('scroll',function(e){
  2. if(e.target.scrollTop > justScrollTop){
  3. $('#toTop').css({'opacity' : 0}); //隐藏
  4. }else{
  5. $('#toTop').css({'opacity' : 0.8}); //显示
  6. }
  7.  
  8. justScrollTop = e.target.scrollTop;
  9. });

效果:

原文链接 http://www.jianshu.com/p/0d12a945f0d6#

javascript实现移动端网页版阅读器的更多相关文章

  1. 使用VLC Activex插件做网页版视频播放器

    网上找的一个小例子,包括时长播放时间等等都有. mrl可以设置本地文件,这样发布网站后只能播放本地有的文件, 如果视频文件全在服务器上,其他电脑想看的话,则可以IIS上发布个视频文件服务器,类似htt ...

  2. JavaScript 权威指南第6版 - [阅读笔记]

    JavaScript 基础   Page 13 (1)<script> 的属性:async,charset,defer='defer',language已废,src,type   (2)n ...

  3. Dreamweaver杀手!Illustrator终结者?Flash的末日?图形图像设计程序之网页版

    Dreamweaver杀手!Illustrator终结者?Flash的末日?图形图像设计程序之网页版 阅读:  评论:  作者:Rybby  日期:  来源:rybby.com Adobe 家的 Il ...

  4. PC网页版、移动客户端、Wap版 有什么不同

    测试周期中,可能会涉及到版本说明的词汇,比如:PC版.网页版.Web客户端.PC客户端.移动端.移动客户端.Wap版.H5. 关于"PC网页版"- 因为之前,基本没有PC终端业务,所以我们在通常的沟通 ...

  5. Linux版EPUB阅读器

    Linux版EPUB阅读器 如果说用平板电脑看书尚属主流的话,那么在电脑上读书就非常少见了.专注阅读16世纪的书是非常困难的了,没人希望后台蹦出QQ聊天窗口.但是如果你非要在电脑上打开电子书的话,那么 ...

  6. Web版RSS阅读器(五)——初步完成阅读功能

    上一篇博文<Web版RSS阅读器(四)——定制自己的Rss解析库myrsslib4j>中,已经分享给大家制作自己的rss解析库.稍微有点遗憾的是,它仅仅支持rss格式的博客.现在给大家分享 ...

  7. 利用 JavaScript SDK 部署网页版“Facebook 登录”

    facebook开发者平台https://developers.facebook.com/ 利用 JavaScript SDK 部署网页版“Facebook 登录” 通过采用 Javascript 版 ...

  8. Web版RSS阅读器(二)——使用dTree树形加载rss订阅分组列表

    在上一边博客<Web版RSS阅读器(一)——dom4j读取xml(opml)文件>中已经讲过如何读取rss订阅文件了.这次就把订阅的文件读取到页面上,使用树形结构进行加载显示. 不打算使用 ...

  9. 基于jQuery仿QQ音乐播放器网页版代码

    基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="m ...

随机推荐

  1. Entity Framework Tutorial Basics(30):

    CRUD using Stored Procedure: In the previous chapter, we have seen how to get data using a stored pr ...

  2. URLTester2.3.2

    文件: URLTester2.3.2.zip 大小: 1170KB 下载: 下载 URLTester是一个URL测试工具,最主要的一个特色是:当一个域名对应多个IP地址时,不用修改hosts文件,即可 ...

  3. Joda Time 使用

    Joda Time 使用 对于系统的一些时间操作很是不方便,为了方便转化,有时候用date,有时候用timestmp,有时候用calendar,忍不住想更改了. 但是任务巨大,先把笔记收藏了,后面有机 ...

  4. [译]Javascript数列的push和pop方法

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  5. C# 使用SendMessage 函数

    在C#中,程序采用了的驱动采用了事件驱动而不是原来的消息驱动,虽然.net框架提供的事件已经十分丰富,但是在以前的系统中定义了丰富的消息对系统的编程提供了方便的实现方法,因此在C#中使用消息有时候还是 ...

  6. gRPC官方文档(异步基础: C++)

    文章来自gRPC 官方文档中文版 异步基础: C++ 本教程介绍如何使用 C++ 的 gRPC 异步/非阻塞 API 去实现简单的服务器和客户端.假设你已经熟悉实现同步 gRPC 代码,如gRPC 基 ...

  7. Ubuntu16.04跑loam_velodyne

    Ubuntu16.04,ros kinetic 其实按照github上的README.md来编译就好 cd ~/catkin_ws/src git clone https://github.com/l ...

  8. loj #6250. 「CodePlus 2017 11 月赛」找爸爸

    #6250. 「CodePlus 2017 11 月赛」找爸爸 题目描述 小 A 最近一直在找自己的爸爸,用什么办法呢,就是 DNA 比对. 小 A 有一套自己的 DNA 序列比较方法,其最终目标是最 ...

  9. boost库checked_delete的使用

    在查看boost库时发现一个小文件checked_delete.hpp里面几个小函数,它的作用用很简短的话来说:防止未定义的行为造成delete时的内存泄露.实现如下: template<cla ...

  10. JS基础学习四:绑定事件

    添加事件 IE: attachEvent Other: addEventListener var button = document.getElementById("buttonId&quo ...