时间:2021-05-26
前面的话
最近在复习自己写的博客,但有的博客内容很长,长到不知道多少时间可以读完。这时,就有种泄气的冲动。但,如果能够提供一个博客内容进度的插件,根据所读内容的多少,显示进度条,让自己对所读的内容进度心里有数,可以让自己平静下来,一点一点读下去。本文将详细介绍博客内容进度插件的实现
效果演示
无论是通过鼠标滚轮,还是拖动滚动条,也或者是按空格键,只要发生了页面的滚动操作,就会触发页面底部博客内容进度条的变化。根据当前内容的多少计算与博客所有内容的比例,最终对应成进度条的宽度。当鼠标移入进度条范围时,会以数字显示出当前的进度百分比
通过使用如下代码,可将进度插件插入页面中
<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来获取其高度即可。且该值是固定不变的,不需在发生滚动事件时再获取,页面加载完成后就可获取
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);//计算Hvar H;addEvent(window,'load',function(){ progress.max = H = cnblogs_post_body.scrollHeight;});//计算h及radioaddEvent(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) + '%'; });以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
项目需求:1.PHP+Ajax无刷新带进度条图片上传,2.带进度条。所需插件:jquery.js,jquery.form.js。最近在做一个手机web项目,需要
js进度加载动画程序是本人的个人作品,写的不好,可以参考,但未经本人允许,请不要用于其它用途!早上写了个首页进度加载动画,本想在我的博客里用上,测试发现博客园加
本文实例讲述了PHP使用Session实现上传进度功能。分享给大家供大家参考,具体如下:实现文件上传进度条基本是依靠JS插件或HTML5的FileAPI来完成,
本文实例为大家分享了js实现滑动进度条效果的具体代码,供大家参考,具体内容如下进度条:js滑动进度条效果*{margin:0;padding:0;user-se
在上一篇博客(详解JS与APP原生控件交互)中已经和大家聊了,关于JS与Android、Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用An