English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

js ブログコンテンツ進捗プラグインの詳細説明

前置き

最近、自分が書いたブログを復習していましたが、中には長いブログ内容があり、どれくらいの時間で読めるか分かりませんでした。その時、少し気落ちする気持ちがありました。しかし、ブログ内容の進捗プラグインを提供すれば、読んだ内容の量に基づいて進捗バーを表示し、読んだ内容の進捗が自分で把握できるようになり、落ち着いて少しずつ読み進めることができます。この記事では、ブログ内容の進捗プラグインの実装について詳しく説明します

効果のデモ

マウスのホイールでスクロールしたり、スクロールバーをドラッグしたり、スペースキーを押したり、ページのスクロール操作が発生した場合、ページの下部のブログ内容の進捗バーが変化します。現在の内容の量に基づいて、ブログ全体の内容との比率を計算し、最終的に進捗バーの幅に対応させます。マウスが進捗バーの範囲に入ると、現在の進捗パーセンテージが数字で表示されます

以下のコードを使用することで、進捗プラグインをページに挿入できます

<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を取得します。図のように、CSDNはブログの内容を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) + '%'; 
});

これで本文のすべてが終わりました。本文の内容が皆様の学習や仕事に少しでも役立つことを願っています。また、呐喊教程！を多くのサポートをお願いします。

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーにより自発的に貢献し、自己でアップロードされています。本サイトは所有権を持ちません。人工編集は行われていません。また、関連する法的責任を負いません。著作権侵害を疑う内容がある場合は、以下のメールアドレスまでご連絡ください：notice#oldtoolbag.com（メールを送信する際には、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認がとりあえず、本サイトは即座に侵害疑いのコンテンツを削除します。）

基礎教程
おすすめ