/*
2 功能：生成博客目录的JS工具
3 测试：IE8，火狐，google测试通过
6 */
7 var BlogDirectory = {
8 /*
9 获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）
10 */
11 getElementPosition:function (ele) {
12 var topPosition = 0;
13 var leftPosition = 0;
14 while (ele){
15 topPosition += ele.offsetTop;
16 leftPosition += ele.offsetLeft;
17 ele = ele.offsetParent;
18 }
19 return {top:topPosition, left:leftPosition};
20 },
21
22 /*
23 获取滚动条当前位置
24 */
25 getScrollBarPosition:function () {
26 var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
27 return scrollBarPosition;
28 },
29
30 /*
31 移动滚动条，finalPos 为目的位置，internal 为移动速度
32 */
33 moveScrollBar:function(finalpos, interval) {
34
35 //若不支持此方法，则退出
36 if(!window.scrollTo) {
37 return false;
38 }
39
40 //窗体滚动时，禁用鼠标滚轮
41 window.onmousewheel = function(){
42 return false;
43 };
44
45 //清除计时
46 if (document.body.movement) {
47 clearTimeout(document.body.movement);
48 }
49
50 var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
51
52 var dist = 0;
53 if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出
54 window.onmousewheel = function(){
55 return true;
56 }
57 return true;
58 }
59 if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离
60 dist = Math.ceil((finalpos - currentpos)/10);
61 currentpos += dist;
62 }
63 if (currentpos > finalpos) {
64 dist = Math.ceil((currentpos - finalpos)/10);
65 currentpos -= dist;
66 }
67
68 var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
69 window.scrollTo(0, currentpos);//移动窗口
70 if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出
71 {
72 window.onmousewheel = function(){
73 return true;
74 }
75 return true;
76 }
77
78 //进行下一步移动
79 var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")";
80 document.body.movement = setTimeout(repeat, interval);
81 },
82
83 htmlDecode:function (text){
84 var temp = document.createElement("div");
85 temp.innerHTML = text;
86 var output = temp.innerText || temp.textContent;
87 temp = null;
88 return output;
89 },
90
91 /*
92 创建博客目录，
93 id表示包含博文正文的 div 容器的 id，
94 mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），
95 interval 表示移动的速度
96 */
97 createBlogDirectory:function (id, mt, st, interval){
98 //获取博文正文div容器
99 var elem = document.getElementById(id);
100 if(!elem) return false;
101 //获取div中所有元素结点
102 var nodes = elem.getElementsByTagName("*");
103 //创建博客目录的div容器
104 var divSideBar = document.createElement('DIV');
105 divSideBar.className = 'sideBar';
106 divSideBar.setAttribute('id', 'sideBar');
107 var divSideBarTab = document.createElement('DIV');
108 divSideBarTab.setAttribute('id', 'sideBarTab');
109 divSideBar.appendChild(divSideBarTab);
110 var h2 = document.createElement('H2');
111 divSideBarTab.appendChild(h2);
112 var txt = document.createTextNode('目录导航');
113 h2.appendChild(txt);
114 var divSideBarContents = document.createElement('DIV');
115 divSideBarContents.style.display = 'none';
116 divSideBarContents.setAttribute('id', 'sideBarContents');
117 divSideBar.appendChild(divSideBarContents);
118 //创建自定义列表
119 var dlist = document.createElement("dl");
120 divSideBarContents.appendChild(dlist);
121 var num = 0;//统计找到的mt和st
122 mt = mt.toUpperCase();//转化成大写
123 st = st.toUpperCase();//转化成大写
124 //遍历所有元素结点
125 for(var i=0; i
posted @
2019-08-03 10:47
我的人生
阅读(
422)
评论()
收藏
举报
浙公网安备 33010602011771号