jQuery閱讀導航進度條插件



136 543 182



特效描述: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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 文字疊加 文字層疊 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 文字拖動 文字拖拽 文字提示框 提示文字 文字收縮展開 文字收縮 文字展開 文字放大縮小 文字縮放 文字大小 文字放大 文字縮小 文字變大 文字變小 文字翻轉 文字旋轉 文字淡出淡進 文字淡出 文字淡進 文字全屏 文字延遲加載 文字延遲 文字加載 360全景 360度全景 h5文字動畫 h5文字邊框動畫 html5文字動畫 html5文字邊框動畫 文字滾動 文字無縫滾動 文字間歇滾動 文字滑動 文字滑塊 文字切換 文字選項卡 滑動星星打分 圖片文字 文字導航菜單 文字導航 文字菜單 切換按鈕 表單 表單美化 表單插件 表單美化插件 文字 文字插件 其他 文字滑動 文字滑塊 文字列表 按鈕控制 進度條 進度條插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表