/* 这段代码按H2、H3格式生成两级菜单 写博客按H2、H3格式写,不然生成不了 Markdown写作按##、###两级目录写 当然你也可以改写代码成三级菜单 参考:孤傲苍狼 zhang_derek 洪卫 2018-5-18 */ let BlogDirectory = { /* 获取元素位置,距浏览器左边界的距离(left)和距浏览器上边界的距离(top)*/ getElementPosition: function (ele) { let topPosition = 0; let leftPosition = 0; while (ele) { topPosition += ele.offsetTop; leftPosition += ele.offsetLeft; ele = ele.offsetParent; } return {top: topPosition, left: leftPosition}; }, /*获取滚动条当前位置 */ getScrollBarPosition: function () { let scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop; return scrollBarPosition; }, /* 移动滚动条,finalPos 为目的位置,internal 为移动速度 */ moveScrollBar: function (finalpos, interval) { //若不支持此方法,则退出 if (!window.scrollTo) { return false; } //窗体滚动时,禁用鼠标滚轮 window.onmousewheel = function () { return false; }; //清除计时 if (document.body.movement) { clearTimeout(document.body.movement); } //获取滚动条当前位置 let currentpos = BlogDirectory.getScrollBarPosition(); let dist = 0; //到达预定位置,则解禁鼠标滚轮,并退出 if (currentpos == finalpos) { window.onmousewheel = function () { return true; } return true; } //未到达,则计算下一步所要移动的距离 if (currentpos < finalpos) { dist = Math.ceil((finalpos - currentpos) / 10); currentpos += dist; } if (currentpos > finalpos) { dist = Math.ceil((currentpos - finalpos) / 10); currentpos -= dist; } let scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置 window.scrollTo(0, currentpos);//移动窗口 if (BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部,则解禁鼠标滚轮,并退出 { window.onmousewheel = function () { return true; } return true; } //进行下一步移动 let repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; document.body.movement = setTimeout(repeat, interval); }, htmlDecode: function (text) { let temp = document.createElement("div"); temp.innerHTML = text; let output = temp.innerText || temp.textContent; temp = null; return output; }, /* 创建博客目录,id表示包含博文正文的 div 容器的 id, mt 和 st 分别表示主标题和次级标题的标签名称(如 H2、H3,大写或小写都可以!), interval 表示移动的速度 */ createBlogDirectory: function (selector, mt, st, interval) { //获取博文正文div容器 let elem = document.querySelector(selector); if (!elem) return false; //获取div中所有元素结点 let nodes = elem.getElementsByTagName("*"); //创建博客目录的div容器 let divSideBar = document.createElement('DIV'); divSideBar.className = 'uprightsideBar'; divSideBar.setAttribute('id', 'uprightsideBar'); let divSideBarTab = document.createElement('DIV'); divSideBarTab.setAttribute('id', 'sideBarTab'); divSideBar.appendChild(divSideBarTab); let h2 = document.createElement('DIV'); divSideBarTab.appendChild(h2); let txt = document.createTextNode('目录导航'); h2.appendChild(txt); let divSideBarContents = document.createElement('DIV'); divSideBarContents.style.display = 'none'; divSideBarContents.setAttribute('id', 'sideBarContents'); divSideBar.appendChild(divSideBarContents); //创建自定义列表 let dlist = document.createElement("dl"); divSideBarContents.appendChild(dlist); let num = 0;//统计找到的mt和st mt = mt.toUpperCase();//转化成大写 st = st.toUpperCase();//转化成大写 //遍历所有元素结点 for (let i = 0; i < nodes.length; i++) { if (nodes[i].nodeName == mt || nodes[i].nodeName == st) { //获取标题文本 let nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g, "");//innerHTML里面的内容可能有HTML标签,所以用正则表达式去除HTML的标签 nodetext = nodetext.replace(/ /ig, "");//替换掉所有的 nodetext = BlogDirectory.htmlDecode(nodetext); //插入锚 nodes[i].setAttribute("id", "blogTitle" + num); let item; switch (nodes[i].nodeName) { case mt: //若为主标题 item = document.createElement("dt"); break; case st: //若为子标题 item = document.createElement("dd"); break; } //创建锚链接 let itemtext = document.createTextNode(nodetext); item.appendChild(itemtext); item.setAttribute("name", num); //添加鼠标点击触发函数 item.onclick = function () { let pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name"))); if (!BlogDirectory.moveScrollBar(pos.top, interval)) return false; }; //将自定义表项加入自定义列表中 dlist.appendChild(item); num++; } } if (num == 0) return false; /* 鼠标进入时的事件处理 */ divSideBarTab.onmouseenter = function () { divSideBarContents.style.display = 'block'; } /* 鼠标离开时的事件处理 */ divSideBar.onmouseleave = function () { divSideBarContents.style.display = 'none'; } document.body.appendChild(divSideBar); } };