命令
现在定位器上的文字阅读app已经很丰富了，良好的阅读体验和海量的书库常常让我感到无比的兴奋。
想起八年前用mp3看几寸屏幕的电子书，我感到一股淡淡的温暖。更近的是，我年轻的时候经常和朋友去书店看***，也就是白看书。旧木书架上那一摞摞厚厚的***小说，在我看来仿佛比我小时候盘子里的午餐肉还好吃。
信息时代的今天，以前空的阅读变得方便了，但是小时候那种期待和兴奋的感觉，却消失在了时间的长河里。
岁月在流逝，时代在进步。
我愿意放下一切浮躁，在新时代快乐地生活。明天会怎样不重要，我相信会比今天更好。
本文以一个web阅读器为例，展示了JavaScript中滚动条的一些处理。这是完成后的样子:
当我向上滚动时，屏幕右下角会出现一个向上的箭头:
当你向下滚动时，它会自动消失。
当我点击这个半透明的箭头按钮时，它会自动滑动到章节的顶部。
本章实现了这个小功能。
开发工具[/S2:HBuilder(个人比较喜欢。我跟风放弃用了半年EditPlus，但是EditPlus真的锻炼了我的拼词能力)
测试环境:谷歌Chrome
主体
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; ***rgin: 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>
好了，现在你可以移除父容器的背景色了。
background: #66CC00; //去掉
为了让定位器型号更相似，我们手动给它添加一个按钮。呃，我们就做一个动画吧。
.back { width: 30px; height: 30px; position: absolute; left: 50%; ***rgin-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; ***rgin-bottom: 1em; color:#736357; border-bottom:1px solid #736357; letter-spacing: 2px;}
这看起来更好，对不对？当然，每个人的审美标准不同，你可以调整到自己喜欢的风格。
段落和单词之间的间距太小。我们来调整一下。别这么小气，哈哈。
.phone .container p { ***rgin-bottom: 15px; letter-spacing: 2px;}
是啊，好多了。
3.介绍向上箭头图标。
我们准备了一个半透明的箭头图标，现在介绍一下。
<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;}
介绍一下。
4.js控制
我们使用jQuery的ani***te方法来实现动画回顶。实现该功能的核心逻辑是从顶部控制滚动条的高度，即scrollTop，使其变为0。
//单机图标直接返回顶部$('#toTop').on('click',function(){ $('.phone .container').eq(0).stop(true, true).ani***te({ 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;});
效果:
本文来自努力打拼@路上投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/548581.html
微信扫一扫 
