jquey实现文章小说阅读滚动进度条上方显示效果代码
代码语言:html
所属分类:加载滚动
代码描述:jquey实现文章小说阅读滚动进度条上方显示效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>读书类页面阅读进度条效果</title>
<meta name="description" content="Neat">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" user-scalable="no">
<style>
html, body{
min-height: 100%;
background: #fafafa;
}
*{
margin:0;
padding:0;
font-size: 12px;
}
ul{
list-style:none;
}
.hide{
display: none;
}
.lf{
float: left;
}
.lr{
float: right;
}
.red, .red a,.red a h5, .red a p{
color:#FF0000 !important;
}
.h20{
height: 20px
}
body{
max-width:1000px;
margin:0 auto
}
.header{
background: #fff;
width:100%;
height:40px;
line-height: 40px;
display: flex;
align-items: center;
padding:25px 1.5em 28px;
box-sizing: border-box;
position:fixed;
top:0;
left:0;
}
header a{
display: flex;
align-items: center;
}
header img{
width: 20px;
}
header .title{
flex:1;
text-align: center;
text-indent: -20px;
}
header .progress-bar{
height:3px;
position: absolute;
background: rgb(16 158 222);
width: 0;
bottom:0;
left:0;
}
.main-group{
padding:70px 1.5em 0;
box-sizing: border-box;
min-height: 100vh;
}
.main-group h3{
font-size: 2em;
margin:0.6em 0
}
.main-group p{
font-size: 1.4em;
text-indent: 2.2em;
margin-bottom:0.9em;
line-height:1.8em;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<header class="header">
<a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/6082324daa860.png" alt=""></a>
<div class="title">斗破苍穹</div>
<div class="progress-bar"></div>
</header>
<div class="main-group">
<h3>第一章 陨落的天才</h3>
<p>“斗之力,三段!”</p>
<p>望着测验魔石碑上面闪亮得甚至有些刺眼的五个大字,少年面无表情,唇角有着一抹自嘲,紧握的手掌,因为大力,而导致略微尖锐的指甲深深的刺进了掌心之中,带来一阵阵钻心的疼痛…</p>
<p>“萧炎,斗之力,三段!级别:低级!”测验魔石碑之旁,一位中年男子,看了一眼碑上所显示出来的信息,语气漠然的将之公布了出来…</p>
<p>中年男子话刚刚脱口,便是不出意外的在人头汹涌的广场上带起了一阵嘲讽的骚动。</p>
<p>“三段?嘿嘿,果然不出我所料,这个“天才”这一年又是在原地踏步!”</p>
<p>“哎,这废物真是把家族的脸都给丢光了。”</p>
<p>“要不是族长是他的父亲,这种废物,早就被驱赶出家族,任其自生自灭了,哪还有机会待在家族中白吃白喝。”</p>
<p>“唉,昔年那名闻乌坦城的天才少年,如今怎么落魄成这般模样了啊?”</p>
<p>“谁知道呢,或许做了什么亏心事,惹得神灵降怒了吧…”</p>
<p>周围传来的不屑嘲笑以及惋惜轻叹,落在那如木桩待在原地的少年耳中,恍如一根根利刺狠狠的扎在心脏一般,让得少年呼吸微微急促。</p>
<p>少年缓缓抬起头来,露出一张有些清秀的稚嫩脸庞,漆黑的眸子木然的在周围那些嘲讽的同龄人身上扫过,少年嘴角的自嘲,似乎变.........完整代码请登录后点击上方下载按钮下载查看
网友评论0