这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本篇文章主要介绍了博客内容进度插件的实现方法,具有很好的参考价值,下面跟着小编一起来看下吧
前面的话
最近在复习自己写的博客,但有的博客内容很长,长到不知道多少时间可以读完。这时,就有种泄气的冲动。但,如果能够提供一个博客内容进度的插件,根据所读内容的多少,显示进度条,让自己对所读的内容进度心里有数,可以让自己平静下来,一点一点读下去。本文将详细介绍博客内容进度插件的实现
效果演示
无论是通过鼠标滚轮,还是拖动滚动条,也或者是按空格键,只要发生了页面的滚动操作,就会触发页面底部博客内容进度条的变化。根据当前内容的多少计算与博客所有内容的比例,最终对应成进度条的宽度。当鼠标移入进度条范围时,会以数字显示出当前的进度百分比
通过使用如下代码,可将进度插件插入页面中
- http://files.cnblogs.com/files/xiaohuochai/progress.js"></script>
由于目录和进度都是常用的功能,所以,我把进度的功能整合到目录生成的插件中了
- 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);
- //计算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) + '%';
- });
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0706/327494.html