|
|
@@ -0,0 +1,166 @@
|
|
|
+/*
|
|
|
+ 这段代码按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);
|
|
|
+ }
|
|
|
+
|
|
|
+};
|
tianyun