部落格內容進度外掛程式的實現

最近在複習自己寫的部落格，但有的部落格內容很長，長到不知道多少時間可以讀完。這時，就有種洩氣的衝動。但，如果能夠提供乙個部落格內容進度的外掛程式，根據所讀內容的多少，顯示進度條，讓自己對所讀的內容進度心裡有數，可以讓自己平靜下來，一點一點讀下去。本文將詳細介紹部落格內容進度外掛程式的實現

無論是通過滑鼠滾輪，還是拖動滾動條，也或者是按空格鍵，只要發生了頁面的滾動操作，就會觸發頁面底部部落格內容進度條的變化。根據當前內容的多少計算與部落格所有內容的比例，最終對應成進度條的寬度。當滑鼠移入進度條範圍時，會以數字顯示出當前的進度百分比

通過使用如下**，可將進度外掛程式插入頁面中

<
script 
src=""
>
script
>

由於目錄和進度都是常用的功能，所以，我把進度的功能整合到目錄生成的外掛程式中了

上面已經簡明扼要的說明了進度條的原理，而實現起來也不困難。在觸發滾動事件時，計算兩個高度值。乙個值h用來表示整篇部落格內容的底部離頁面頂端的距離。乙個值h用來表示當前視窗內部落格內容的底部離頁面頂端的距離。從而比例值radio = h/h，就是進度百分比，以進度條的寬度變化顯示出來

獲取部落格內容總高度h，如下圖所知，將部落格內容放在id為cnblogs_post_body的div內，通過scrollheight來獲取其高度即可。且該值是固定不變的，不需在發生滾動事件時再獲取，頁面載入完成後就可獲取

獲取當前頁面視窗中顯示的部落格內容高度h，h實際上就是頁面的滾動距離h2

var h = document.documentelement.scrolltop || document.body.scrolltop;

進度條實現，通過h和h，可以計算出比例係數radio = h/h。html5新增了乙個表單類控制項progress，就是用來表示任務的進度或程序的

[注意]ie9-瀏覽器不支援

如果是ie9-瀏覽器，progress元素被退化為div元素，僅顯示百分比即可

將progress的max值設定為h，將value值設定為h。滾動事件觸發時，更新value值即可

addevent(window,'scroll',function());

樣式設定

進度條的樣式設定較為簡單，將其固定定位，居於頁面底部，並與視窗寬度相同

.progress

動態指令碼

由於最終將以外掛程式的形式呈現，所有的**都需要動態生成

var progress = document.createelement('progress');
progress.id = 'progress';
//事件相容
function addevent(target,type,handler)else);
}}//
生成元素
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 "宋體";';
//計算h
var h;
addevent(window,'load',function());
//計算h及radio
addevent(window,'scroll',function());

部落格內容進度外掛程式的實現

Eclipse 外掛程式實現進度條

帶進度條的上傳外掛程式

值得學習的部落格內容

部落格內容進度外掛程式的實現

Eclipse 外掛程式實現進度條

帶進度條的上傳外掛程式

值得學習的部落格內容

相關推薦