感谢 孤傲苍狼 分享了 自动生成博文目录的方法,本文仅作存档使用。

图 1:效果预览

CSS 样式

#TOCbar{
font-size:12px; text-align:left; position:fixed; width: auto;
height: auto; top:50px; right:0px; /*离页面顶部与右侧的距离*/
}
#TOCbarTab{
float:left; width:30px; border:1px solid #e5e5e5; border-right:none;
text-align:center; background:#ffffff;
}
#TOCbarContents{
float:left; overflow:auto; overflow-x:hidden;!important;
width:200px; min-height:123px; max-height:289px;
border:1px solid #e5e5e5; border-right:none; background:#ffffff;
}
#TOCbarContents dl{ margin:0; padding:0; }
#TOCbarContents dt{ margin-top:5px; margin-left:5px; }
#TOCbarContents dd, dt { cursor: pointer; }
#TOCbarContents dd:hover, dt:hover { color:#A7995A;}

Javascript 源码

var BlogDirectory = {
/*
获取元素位置,距浏览器左边界的距离(left)和距浏览器上边界的距离(top)
*/
getElementPosition:function (ele) {
var topPosition = 0;
var leftPosition = 0;
while (ele){
topPosition += ele.offsetTop;
leftPosition += ele.offsetLeft;
ele = ele.offsetParent;
}
return {top:topPosition, left:leftPosition};
},
/*
获取滚动条当前位置
*/
getScrollBarPosition:function () {
var 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);
} var currentpos =BlogDirectory.getScrollBarPosition(); // 获取滚动条当前位置 var 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;
} var scrTop = BlogDirectory.getScrollBarPosition(); // 获取滚动条当前位置
window.scrollTo(0, currentpos); // 移动窗口
if(BlogDirectory.getScrollBarPosition() == scrTop) // 若已到底部,则解禁鼠标滚轮,并退出
{
window.onmousewheel = function(){
return true;
}
return true;
} // 进行下一步移动
var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")";
document.body.movement = setTimeout(repeat, interval);
}, htmlDecode:function (text){
var temp = document.createElement("div");
temp.innerHTML = text;
var output = temp.innerText || temp.textContent;
temp = null;
return output;
},
/*
创建博客目录,id表示包含博文正文的 div 容器的 id,mt 和 st 分别表示主标题和次级标题的标签名称,interval 表示移动的速度
*/
createBlogDirectory:function (id, mt, st, interval){
// 获取博文正文div容器
var elem = document.getElementById(id);
if(!elem) return false;
// 获取div中所有元素结点
var nodes = elem.getElementsByTagName("*");
// 创建博客目录的div容器
var divTOCbar = document.createElement('DIV');
divTOCbar.className = 'TOCbar';
divTOCbar.setAttribute('id', 'TOCbar');
var divTOCbarTab = document.createElement('DIV');
divTOCbarTab.setAttribute('id', 'TOCbarTab');
divTOCbar.appendChild(divTOCbarTab);
var h3 = document.createElement('h3');
divTOCbarTab.appendChild(h3);
var txt = document.createTextNode('<<'); // 目录导航名字
h3.appendChild(txt);
var divTOCbarContents = document.createElement('DIV');
divTOCbarContents.style.display = 'none';
divTOCbarContents.setAttribute('id', 'TOCbarContents');
divTOCbar.appendChild(divTOCbarContents);
// 创建自定义列表
var dlist = document.createElement("dl");
divTOCbarContents.appendChild(dlist);
var num = 0; // 统计找到的mt和st
mt = mt.toUpperCase(); // 转化成大写
st = st.toUpperCase(); // 转化成大写
// 遍历所有元素结点
for(var i=0; i<nodes.length; i++)
{
if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)
{
// 获取标题文本
var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,""); // innerHTML里面的内容可能有HTML标签,所以用正则表达式去除HTML的标签
nodetext = nodetext.replace(/&nbsp;/ig, ""); // 替换掉所有的 &nbsp;
nodetext = BlogDirectory.htmlDecode(nodetext);
// 插入锚
nodes[i].setAttribute("id", "blogTitle" + num);
var item;
switch(nodes[i].nodeName)
{
case mt: // 若为主标题
item = document.createElement("dt");
break;
case st: // 若为子标题
item = document.createElement("dd");
break;
} // 创建锚链接
var itemtext = document.createTextNode(nodetext);
item.appendChild(itemtext);
item.setAttribute("name", num);
item.onclick = function(){ // 添加鼠标点击触发函数
var 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;
/* 鼠标进入时的事件处理 */
divTOCbarTab.onmouseenter = function(){
divTOCbarContents.style.display = 'block';
}
/* 鼠标离开时的事件处理 */
divTOCbar.onmouseleave = function() {
divTOCbarContents.style.display = 'none';
} document.body.appendChild(divTOCbar);
} }; window.onload=function(){
/* 页面加载完成之后生成博客目录 */
BlogDirectory.createBlogDirectory("cnblogs_post_body","h1","h2",20);
}

JavaScript:自动生成博文目录导航的更多相关文章

  1. JavaScript自动生成博文目录导航

    转载于:JavaScript自动生成博文目录导航 我们在写博客的时候,如果博文里面有目录,会给人结构清晰.一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到 具体的内容 ...

  2. JavaScript自动生成博文目录导航/TOP按钮

    博客园页面添加返回顶部TOP按钮 进入网页管理->设置 在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式 此处可以将背景色background-co ...

  3. [笔记][Web]利用JS生成博文目录及CSS定制博客

    0. 简介 进入到cnblog这个大园子以后,和其他的一些博客网站比起来,少了些小功能,比如旁边CSDN上的目录.不过好在大神辈出,博客园可以通过申请JS权限来进行目录的生成. 由于本人在JS以及CS ...

  4. CSDN中根据文章自动生成文章目录

    概述 CSDN中有根据文件内容中H标签在文章中自动生成文章目录,看起来比较专业,就想把它搬到自己的博客园中.类似下图 提取JS脚本 通过浏览器开发者工具(IE/Chrome)找到产生文章目录javas ...

  5. Jquery实现自动生成二级目录

    在博客园开通博客以后,就看到某位博友写的js自动生成目录的文章,当时觉得生成目录能给阅读带来方便,所以就直接拿来使用了.用了一段时间以后,发现只能生成一级目录,不能生成多级目录,有点美中不足.所以想着 ...

  6. TP自动生成模块目录

    TP自动生成模块目录 例如我想在项目中增加一个AdminI模块 只需要在入口文件index.php中添加: define('BIND_MODULE','Admin'); 再访问127.0.0.1项目就 ...

  7. 用jquery实现文章自动生成二级目录(续)

    前文:用jquery实现文章自动生成二级目录. 使用方法的补充 我们可以把我们的js和css上传到博客园,然后在页面HTML代码中使用他们. 发现的一些问题 在我把我的js放到自己的博客园上运行之后发 ...

  8. 用React实现一个自动生成文章目录的组件

    原文地址:小寒的博客 功能介绍 这个组件的效果呐,就是你在浏览这个页面的时候点击右上角的叉叉看到的那个文章目录. 功能很简单,就是根据文章内容自动生成这个目录,可以快速跳转. 需要的知识点 正则 do ...

  9. 用jquery实现文章自动生成二级目录

    前段时间有个同学问有没有办法在博客园上发一篇文章然后自动生成文章的目录.之前不知道该怎么做这几天看了些jquery之后觉得还是容易的. 一级目录 一级目录的思路很简单,找出作为一级标题的元素,在某个地 ...

随机推荐

  1. Python——cmd调用(os.system阻塞处理)(多条命令执行)

    os.system(返回值为0,1,2)方法 0:成功 1:失败 2:错误 os.system默认阻塞当前程序执行,在cmd命令前加入start可不阻塞当前程序执行. 例如: import os os ...

  2. collection 在创建迭代器后 不能在添加数据 否则会出现并发问题

    collection 在创建迭代器后 不能在添加数据 否则会出现并发问题

  3. 【bzoj3573】[HNOI2014]米特运输 树形dp

    题目描述 米特是D星球上一种非常神秘的物质,蕴含着巨大的能量.在以米特为主要能源的D星上,这种米特能源的运输和储存一直是一个大问题.D星上有N个城市,我们将其顺序编号为1到N,1号城市为首都.这N个城 ...

  4. 题解 P2089 【烤鸡】

    看到这个题一共也就pow(3,10)=59049次循环,那不就暴力了嘛! 虽然说正解是动归和搜索, 但是搜索和暴力枚举的差距真心不大(不好好学习qwq). 看到楼上又说到 答案需要数据存储的问题, 这 ...

  5. C++解析(17):操作符重载

    0.目录 1.操作符重载 2.完善的复数类 3.小结 1.操作符重载 下面的复数解决方案是否可行? 示例1--原有的解决方案: #include <stdio.h> class Compl ...

  6. "XX cannot be resolved to a type "eclipse报错及解决

    好久都没有写博了,还记得自己准备考研,结果你会发现——你永远不知道,你将会走上哪个路. 长远的目标是好的,但有些时候身不由己也迫不得已!做好自己的当下就是好的. 不论搞什么,总会遇到各种各样的问题,以 ...

  7. 【BZOJ3672】【NOI2014】购票(线段树,斜率优化,动态规划)

    [BZOJ3672][NOI2014]购票(线段树,斜率优化,动态规划) 题解 首先考虑\(dp\)的方程,设\(f[i]\)表示\(i\)的最优值 很明显的转移\(f[i]=min(f[j]+(de ...

  8. A2W W2A等所需要的文件

    1.包含头文件 #include <atlbase.h> #include <atlconv.h> 2.在使用前加上,注意,不是在文件都定义. USES_CONVERSION;

  9. 廖大大python学习笔记1

    列表classmates = ['Michael', 'Bob', 'Tracy']classmates.append('tom')print classmates# classmates.inser ...

  10. 延长xss的攻击(转)

    XSS 的本质仍是一段脚本.和其他文档元素一样,页面关了一切都销毁.除非能将脚本蔓延到页面以外的地方,那样才能获得更长的生命力. 庆幸的是,从 DOM 诞生的那一天起,就已为我们准备了这个特殊的功能, ...