js博客内容进度插件详情

前面的话

最近一直在复习博客，但是有些博客太长了，不知道要多久才能写完。这个时候，有一种气馁的冲动。但是，如果你能提供一个博客内容进度插件，根据你阅读的内容量显示进度条，让自己知道你阅读内容的进度，你就能让自己静下心来，一点一点地阅读。本文将详细介绍博客内容进度插件的实现

效果演示

无论是使用鼠标滚轮、拖动滚动条还是按空格键，只要页面滚动，页面底部的博客内容进度条的变化就会被触发。根据当前内容，计算与博客所有内容的比例，最后对应进度条的宽度。当鼠标移动到进度条的范围内时，当前进度百分比将以数字显示

通过使用以下代码，您可以将进度插件插入到页面中

script src=' http :http://files . cn blogs.com/files/xiaohochai/progress . js '/script

因为目录和schedule是常用的函数，所以我将schedule函数集成到了由directory生成的插件中

script src=' http :http://files . cn blogs.com/files/xiaohochai/catalog . js '/script

原理解释

进度条的原理上面已经简单说明了，实现起来并不难。触发滚动事件时，会计算两个高度值。值h用于指示整个博客内容的底部和页面顶部之间的距离。值h用于指示当前窗口中博客内容底部和页面顶部之间的距离。因此，比例值radio=h/H是进度百分比，由进度条的宽度变化显示

具体实现

[1]获取博客内容的总高度h。从下图中我们知道，blog park将博客内容放在id为cnblogs_post_body的div中，并通过scrollHeight获取其高度。并且该值是固定的，发生滚动事件时不需要获取，加载页面后即可获取。

函数addEvent(目标，类型，处理程序){ if(target . addeventlistener){ target . addeventlistener(类型，处理程序，false)；}else{ target.attachEvent('on '类型，函数(事件){ return handler.call(target，event)；});} } var H；addEvent(window，' load '，function(){ H=cn blogs _ post _ body . scroll height；});[2]获取当前页面窗口显示的博客内容高度H，其中H实际上是页面的滚动距离h2

var h=document . document element . scroll top | | document . body . scroll top；

[3]进度条的实现，通过H和H，可以计算出比例系数radio=h/H。HTML5增加了一个表单类控制进度，用来表示任务的进度或进度

[注意]IE9-浏览器不支持

进度id='进度'值='最大值=' '/进度

如果是IE9- browser，进度元素退化为div元素，只能显示百分比

将最大进度值设置为H，将值设置为H.触发滚动事件时，更新该值

addEvent(window，' scroll '，function(){ var h=document . document element . scroll top | | document . body . scroll top；progress . value=h；var radio=(h/H=1)？1 :H/H；progress . innerhtml=progress . title=math . floor(100 * radio)' % '；});[4]样式设置

进度条的样式设置比较简单，固定定位在页面底部，宽度和窗口一样。进度{ position:fixedleft:0right:0底部：0；宽度：100%；height:12px文本对齐：居中；font :12 px/12 px ''；} [5]动态脚本

因为它最终将呈现为一个插件，所以所有的代码都需要动态生成

var progress=document . create element(' progress ')；progress.id=' progressdocument.body.appendChild(进度)；插件代码

//事件兼容函数addEvent(目标，类型，处理程序){ if(target。addeventlistener){ target。addeventlistener(类型，处理程序，假)；}else{ target.attachEvent('on ')类型，函数（事件){ return handler.call(目标，事件)；});}}//生成元素var progress=文档。创建元素(“进度”)；progress.id=' progressprogress。风格。CSS文本='位置：固定；左：0右：0底部：0;宽度：100%;高度：12px文本对齐：居中；font:12px/12px '宋体；document.body.appendChild(进度);//计算hvar HaddEvent(window，' load '，function(){ progress。max=H=cn blogs _ post _ body。滚动高度；});//计算h及radioaddEvent(window，' scroll '，function(){ var h=document。文档元素。向上滚动| |文档。尸体。滚动顶部；进步。值=h；var radio=(h/H=1)？1 :小时/小时；进步。innerhtml=进度。标题=数学。楼层(100 *收音机)' % '；});以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！