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编程起步(第七课)
Feb 27 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
绑定回车enter事件代码
May 18 Javascript
浅谈JavaScript字符集
May 22 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 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
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
python3.4中清屏的处理方法
2020/07/06 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
python给list排序的简单方法
2020/12/10 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
CSS3 分类菜单效果
2019/05/27 HTML / CSS
解释一下抽象方法和抽象类
2016/08/27 面试题
动态密码技术
2012/10/18 面试题
求职推荐信
2013/10/28 职场文书
继承权公证书
2014/04/09 职场文书
产品发布会策划方案
2014/05/12 职场文书
会计实训总结范文
2015/08/03 职场文书