js脚本编写教程 js网页编程 _网页-「四川龙网」

文章插图
序现在手机上的文本阅读app已经非常丰富，良好的阅读体验与海量的书库常常令我感到无比兴奋。
我想到8年前用一点几寸屏幕的mp3看电子书的情景，顿生一种淡淡的温馨。再久远一些，小的时候，我也经常和小伙伴们组团去书店看白书，也就是白看书。古老的木质书架上那一叠叠厚重的黄皮小说书，在年幼的我眼里仿佛是比盘子里的午餐肉更加美味可口的东西。
而在当今这个信息化的时代，看书变得空前的便利，可是儿时那种期待和兴奋的感受却消失在了时间的长河。
岁月在流逝，时代在进步。
愿放下所有的浮躁，在新的时代愉快地生活，无所谓明天怎样，我都相信肯定比今天更好。
本文以一个网页版阅读器作为案例，展示JavaScript中，对滚动条的一些处理，这是完成以后的样子：
当我滚动条往上滚动的时候，屏幕右下角会出现一个向上的箭头：
而往下滚动的时候，又自动消失。
当我点击这个半透明的箭头按钮，就会自动滑动到章节的最顶端。
本章就实现这个小功能。
开发工具：HBuilder（个人喜欢，顺从潮流放弃了使用大半年的EditPlus，不过EditPlus确实锻炼了我拼写单词的能力）
测试环境：谷歌浏览器
正文1. 页面布局与绘制
我们写一个基本的html模板
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>TextReader</title> <script src="https://www.520longzhigu.com/uploads/allimg/220429/095202D19-1.jpg"></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 ，所以宽度和高度依然是起作用的。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：