js 博客内容进度插件详解


Posted in Javascript onFebruary 19, 2017

前面的话

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

效果演示

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

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

<script src="http://files.cnblogs.com/files/xiaohuochai/progress.js"></script>

由于目录和进度都是常用的功能,所以,我把进度的功能整合到目录生成的插件中了

<script src="http://files.cnblogs.com/files/xiaohuochai/catalog.js"></script>

原理解释

上面已经简明扼要的说明了进度条的原理,而实现起来也不困难。在触发滚动事件时,计算两个高度值。一个值H用来表示整篇博客内容的底部离页面顶端的距离。一个值h用来表示当前窗口内博客内容的底部离页面顶端的距离。从而比例值radio = h/H,就是进度百分比,以进度条的宽度变化显示出来

具体实现

【1】获取博客内容总高度H,如下图所知,博客园将博客内容放在id为cnblogs_post_body的div内,通过scrollHeight来获取其高度即可。且该值是固定不变的,不需在发生滚动事件时再获取,页面加载完成后就可获取

js 博客内容进度插件详解

js 博客内容进度插件详解

function addEvent(target,type,handler){
 if(target.addEventListener){
 target.addEventListener(type,handler,false);
 }else{
 target.attachEvent('on'+type,function(event){
  return handler.call(target,event);
 });
 }
}
var H;
addEvent(window,'load',function(){
 H = cnblogs_post_body.scrollHeight;
});

【2】获取当前页面窗口中显示的博客内容高度h,h实际上就是页面的滚动距离h2

var h = document.documentElement.scrollTop || document.body.scrollTop;

【3】进度条实现,通过H和h,可以计算出比例系数radio = h/H。HTML5新增了一个表单类控件progress,就是用来表示任务的进度或进程的

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

<progress id="progress" value="" max=""></progress>

如果是IE9-浏览器,progress元素被退化为div元素,仅显示百分比即可

将progress的max值设置为H,将value值设置为h。滚动事件触发时,更新value值即可

addEvent(window,'scroll',function(){
 var h = document.documentElement.scrollTop || document.body.scrollTop;
 progress.value = h;
 var radio = (h/H >= 1) ? 1 : h/H;
 progress.innerHTML = progress.title = Math.floor(100*radio) + '%'; 
});

【4】样式设置

进度条的样式设置较为简单,将其固定定位,居于页面底部,并与窗口宽度相同

.progress{
 position:fixed;
 left:0;
 right:0;
 bottom:0;
 width:100%;
 height:12px;
 text-align:center;
 font:12px/12px "宋体";
}

【5】动态脚本

由于最终将以插件的形式呈现,所有的代码都需要动态生成

var progress = document.createElement('progress');
progress.id = 'progress';
document.body.appendChild(progress);

插件代码

//事件兼容
function addEvent(target,type,handler){
 if(target.addEventListener){
 target.addEventListener(type,handler,false);
 }else{
 target.attachEvent('on'+type,function(event){
  return handler.call(target,event);
 });
 }
}
//生成元素
var progress = document.createElement('progress');
progress.id = 'progress';
progress.style.cssText = 'position:fixed;left:0;right:0;bottom:0;width:100%;height:12px;text-align:center;font:12px/12px "宋体";';
document.body.appendChild(progress);
//计算H
var H;
addEvent(window,'load',function(){
 progress.max = H = cnblogs_post_body.scrollHeight;
});
//计算h及radio
addEvent(window,'scroll',function(){
 var h = document.documentElement.scrollTop || document.body.scrollTop;
 progress.value = h;
 var radio = (h/H >= 1) ? 1 : h/H;
 progress.innerHTML = progress.title = Math.floor(100*radio) + '%'; 
});

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
ajax接收后台数据在html页面显示
Feb 19 #Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 #Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 #Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 #Javascript
Angular 输入框实现自定义验证功能
Feb 19 #Javascript
js实现九宫格的随机颜色跳转
Feb 19 #Javascript
原生JS实现垂直手风琴效果
Feb 19 #Javascript
You might like
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
jQuery基础框架浅入剖析
2012/12/27 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
对python 多个分隔符split 的实例详解
2018/12/20 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
django中forms组件的使用与注意
2019/07/08 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
python deque模块简单使用代码实例
2020/03/12 Python
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
夜大毕业生自我鉴定
2013/10/31 职场文书
村官学习十八大感想
2014/01/15 职场文书
《童趣》教学反思
2014/02/19 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
公司经营目标责任书
2015/01/29 职场文书
运动会主持人开幕词
2016/03/04 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python