jQuery阅读导航进度条插件



124 495 166



特效描述:jQuery 阅读导航 进度条插件,这是一款基于jQuery文章阅读进度条演示。当页面滚动时,它会固定在页面顶部,以区段和在每个区段中显示读取进度。它也可以用于导航,当点击导航时,会滚动到相应的文章读取进度代码。(ps:不兼容IE6,7,8)

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/reset.min.css">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400|Merriweather:300'>
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>

3. HTML代码

<h1>阅读进度条</h1>
<p>这是一个jQuery“粘性”阅读进度条的演示,我最近开发了它。当视口太窄时,它会隐藏在滚动条上的视口顶部,以区段和在每个区段中显示读取进度。它也可以用于导航。</p>
<p>进度条的HTML是基于用于定义每个部分(在此情况下,H2标题)的元素在PaGeload上动态生成的。 </p>
<h2>Gouda</h2>
<p>Ad possit debitis sea, ea hinc discere dissentiet mel, persius posidonium sadipscing pri no. Vix fugit nusquam fierent in, cu probo congue ius. Cu regione viderer pro, quot veniam appetere et vix. Cum at nisl praesent. No nam nostro audire, no sit populo tibique, id ceteros appetere platonem pri. An graecis salutatus sed. His an dico efficiendi, novum eruditi at nec, vel ei affert mucius consequat.</p>
<p>Ex prompta constituam vis, an eos deleniti tractatos, nam alii aliquando temporibus eu. Duo ei nulla animal elaboraret. Meis adhuc id vix, ne nam nihil graecis antiopam. Vel ea eligendi perfecto repudiandae, no pri tation deterruisset. Ei unum nihil sea, tantas minimum invidunt vel an, nominavi delicata posidonium cum no. Porro adversarium cum eu, admodum lucilius nec at, eu magna definitionem has. Nam lorem movet tollit in.</p>
<p>Harum euismod assentior ei has, vidisse principes consetetur ne vel. No iriure eripuit quo, integre persequeris ex vis, ne has autem probatus. Elit copiosae efficiendi te sea, duo ad aeterno graecis, an populo assueverit sit. Vis an fabulas graecis expetenda, natum quaestio at vim. Cu sed nisl utroque vituperatoribus, ne vim stet ocurreret.</p>
<p>Nihil iracundia usu in, sit ex admodum liberavisse necessitatibus, menandri dissentiunt at his. Pri at saepe tamquam expetenda, cu eros mollis blandit eos, possit quaestio ut nec. Te expetenda evertitur vis, semper dictas eleifend cum at. Mea deserunt maiestatis percipitur ex, te sea habeo percipitur, qui ne harum tritani persequeris. Eos eu quod dolore. Ius erat illum eu, tractatos mediocrem vim ea.</p>
<h2>Brie</h2>
<p>Sea in singulis delicatissimi, alia prima ei cum. Sed in quas dissentias reprehendunt. Paulo semper corpora ne pri, vis no iriure luptatum. Alii error diceret ius te, dolorum complectitur definitionem vix ea. Fugit atqui debitis ad his. Perfecto delicata senserit id has. Tempor inimicus erroribus eam ex.</p>
<p>Pro falli eruditi sapientem ei, lucilius periculis ius ea. Eum veri meliore mentitum ex, ne erat graece per. In pro habeo simul vituperatoribus, pro minim noster utroque an. Partem delicatissimi cum et, no aeque nonumy urbanitas est. Sonet vivendum in nam. Nec porro ubique scripta in, veri saperet graecis vis cu, has cu dicat sanctus impedit. Mei in duis timeam invenire.</p>
<h2>Manchego</h2>
<p>Eos ex erant latine sanctus, at sea labore adolescens ullamcorper. Ut aeque veritus vis, no cum doming civibus adipiscing. Te mel eius quidam blandit, iudico nusquam pri ex.</p>
<p>Probo dicunt his eu, eum et eirmod labitur accommodare. Duo tempor euripidis ut, his nostrud persecuti in. Tantas oportere ullamcorper sed no, id paulo vitae voluptatibus sea. Quo te aliquid nominati signiferumque. Ad has graecis gubergren, cu iracundia voluptatibus pri.</p>
<p>Vero mediocrem salutatus ne mel. Ex prima justo volumus mei. Te sed nemore praesent interesset, eam evertitur similique comprehensam in. Ei modus minimum menandri mel, tollit perpetua eloquentiam qui ea. No modus iriure aliquip quo.</p>
<h2>Camembert</h2>
<p>Erroribus cotidieque ex quo, iisque habemus ex eos, vocent apeirian necessitatibus sit at. Sint partem invidunt te qui. His eros integre saperet at, vidit aliquip eos no. Qui ea veniam soleat periculis.</p>
<p>Has idque volutpat percipitur ea, his ne elitr sanctus detraxit. Cu eos assum dolorum recusabo, eu mei omnes suscipiantur, at eos timeam regione. Duo quas explicari cu, habemus deterruisset vix ne. An quo ferri dicam forensibus, eu populo labore corpora nec, facete commune ancillae ut pro. Nam iusto placerat te.</p>
<p>Antiopam mnesarchum temporibus cu nam, ei duo affert commune efficiendi. Usu inani efficiantur ex. Natum docendi tincidunt ex eum, qui ut diam veniam volutpat, ferri utinam munere eu vel. Ei cum liber perpetua gubergren.</p>
<h2>Edam</h2>
<p>Lorem ipsum dolor sit amet, in viderer periculis nam, delectus accusamus pro no. Sea nusquam partiendo consequat id, has tation temporibus consequuntur id. Fastidii liberavisse usu ad, prima civibus expetendis ex eum, est ex posse lucilius repudiare. Eu delenit sapientem molestiae nec, his ei cibo autem aliquando, impetus appellantur sea cu. Reque audiam ad his, case dignissim posidonium an duo, ex deleniti noluisse deterruisset usu.</p>
<p>Et impetus aliquip mel, per quod probo accumsan et. Ea solum pertinacia eloquentiam nec, et iisque sensibus scriptorem mei. Mazim laoreet repudiare ex nam, possit platonem te mei, his brute impetus adversarium ne. Usu vero autem inermis no, id wisi viris democritum vix.</p>
<p>Mandamus hendrerit scribentur eu vis, et nam aperiri volumus. Ut vix graecis legendos eleifend, ad quas mucius per. Justo nonumes offendit at mel, ut mea prompta recusabo neglegentur, at possim noluisse usu. Ad quidam aliquando vis, eam quidam ancillae pertinax eu, vis eu solum nonumy nostrud. Et cum saepe homero aeterno, graece inermis te qui, sea ut legimus urbanitas intellegat.</p>
<h2>Gorgonzola</h2>
<p>Pri antiopam volutpat te, an unum menandri quo, mei eu error comprehensam. Cu debitis scribentur sea, id errem regione percipit eos, omnium aliquando efficiendi his id. Mei et quot neglegentur, senserit indoctum his te. Commodo delectus eu usu, vel te atqui cetero nostrud. No nobis explicari cum, quo dico simul no.</p>
<p>Corpora euripidis te nam. At ius nihil indoctum sadipscing, qui at stet docendi constituto. Porro consequuntur an quo, et quodsi aliquando usu, an nec tamquam sensibus. Ea ius dictas quodsi cetero, natum praesent necessitatibus id vim, dissentiet ullamcorper ea sed. At mel menandri comprehensam, ad eos velit moderatius.</p>
<p>Prima dolorum id his, vix te volumus persecuti. Usu in solum integre, vocibus oporteat eu vix. Ei mel meis facete. Vix an copiosae electram. Te dicta laudem usu, vim mandamus referrentur ne.</p>
<p>Mel sensibus maiestatis dissentiunt te, cum cu atomorum inimicus, has indoctum mediocrem gloriatur ea. Eu modus interpretaris pro, ea duo epicuri salutatus principes. Sit cu everti bonorum torquatos. At nominati inimicus rationibus eum. No ius facer similique, ei pri alia eius vulputate. Mea ex mazim ludus scriptorem, sea lucilius constituam ei.</p>
<p>In cum munere habemus reformidans, vis iriure consequat an, vel te zril iisque. Error accusam duo ad, ei mel posse utamur omnesque. Sea tempor facilisi at, graeco conceptam eos cu. Ridens detraxit complectitur has ut, no atomorum oportere dignissim sit. Sed solum laoreet torquatos cu, per ea efficiendi comprehensam.</p>
<p>Per prompta nostrud an. Labitur iuvaret constituam nec ne, per meliore vituperata repudiandae ad. Ut per accusata oportere, cu delenit convenire contentiones eos. Ut usu elaboraret percipitur. Nam efficiendi disputando an. Eum et erat atqui omnesque, omnes appetere cu vel, et eos nusquam delicata.</p>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 文字叠加 文字层叠 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 文字延迟加载 文字延迟 文字加载 文字全屏 文字淡出淡进 文字淡出 文字淡进 文字翻转 文字旋转 文字放大缩小 文字缩放 文字大小 文字放大 文字缩小 文字变大 文字变小 文字收缩展开 文字收缩 文字展开 文字提示框 提示文字 文字拖动 文字拖拽 h5文字动画 h5文字边框动画 html5文字动画 html5文字边框动画 360全景 360度全景 文字切换 文字选项卡 文字滑动 文字滑块 文字滚动 文字无缝滚动 文字间歇滚动 滑动星星打分 图片文字 文字导航菜单 文字导航 文字菜单 切换按钮 表单 表单美化 表单插件 表单美化插件 文字 文字插件 其他 文字滑动 文字滑块 文字列表 按钮控制 进度条 进度条插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到