js 博客内容进度插件详解

前端之家收集整理的这篇文章主要介绍了js 博客内容进度插件详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前面的话

最近在复习自己写的博客,但有的博客内容很长,长到不知道多少时间可以读完。这时,就有种泄气的冲动。但,如果能够提供一个博客内容进度的插件,根据所读内容的多少,显示进度条,让自己对所读的内容进度心里有数,可以让自己平静下来,一点一点读下去。本文将详细介绍博客内容进度插件的实现

效果演示

无论是通过鼠标滚轮,还是拖动滚动条,也或者是按空格键,只要发生了页面的滚动操作,就会触发页面底部博客内容进度条的变化。根据当前内容的多少计算与博客所有内容的比例,最终对应成进度条的宽度。当鼠标移入进度条范围时,会以数字显示出当前的进度百分比

通过使用如下代码,可将进度插件插入页面

猜你在找的JavaScript相关文章