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中的数学函数集合
May 08 Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
关于layui flow loading占位图的实现方法
Sep 21 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
常用简易JavaScript函数
2009/04/09 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
Python深度优先算法生成迷宫
2018/01/22 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
对python字典过滤条件的实例详解
2019/01/22 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
交通安全教育制度
2014/02/02 职场文书
目标责任书范本
2014/04/16 职场文书
责任书范本大全
2015/05/11 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android
Win11查看设备管理器
2022/04/19 数码科技
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers