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 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
jquery多浏览器捕捉回车事件代码
Jun 22 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
原生javascript单例模式的应用实例分析
Feb 23 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 Javascript
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
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
JavaScript中set与get方法用法示例
2018/08/15 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
Python编程中的反模式实例分析
2014/12/08 Python
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
Python程序暂停的正常处理方法
2019/11/07 Python
python的等深分箱实例
2019/11/22 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
详解python字符串驻留技术
2021/05/21 Python
判断Python中的Nonetype类型
2021/05/25 Python
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS