前面的话
有朋友在博客下面留言，询问博客目录是如何生成的。接下来就详细介绍实现过程
操作说明
关于博客目录自动生成，已经封装成catalog.js文件，只要引用该文件即可
//默认地，为页面上所有的h3标签生成目录
如下图所示，打开HTML源代码编辑器，在最后引入js即可
【功能简要说明】
1、点击目录项，对应章节标题将显示在可视区上方
2、滚动滚轮，目录项会对应章节标题的变化而相应地变化
3、点击目录右上角的关闭按钮，可以将目录缩小为"显示目录"四个字，双击缩小后的目录，可恢复默认状态
4、目录可以拖拽至任意地方
目录参照
首先，要确定的是，基于什么生成目录。是文章中的
标签，还是文章中的class="list"的标签。所以，更人性化的做法是，将其作为参数，默认参数为
由于博客园的博文除了自己生成的博客内容外，博客园还会添加诸如评论、公告、广告等元素。所以，第一步要先定位博文
博文最终都处于id="cnblogs_post_body"的div中
标题
函数*/
function setCatalog(){
//
获取页面中所有的script
标题
var aEle = document.getElementsByTagName('script');
//设置sel变量，用于保存其选择符的字符串值
var sel;
//
获取script
标签上的data-selector值
Array.prototype.forEach.call(aEle,function(item,index,array){
sel = item.getAttribute('data-selector');
if(sel) return;
})
//默认参数为h3
标签
if(sel == undefined){
sel ='h3';
}
//选取
文章中所有的章节
标题
var tempArray = document.querySelectorAll(sel);
};
目录连接
目录如何与章节进行对应呢，最常用的就是使用锚点。以基于文章中的
标签生成目录为例，为每一个标签按照顺序添加锚点(#anchor1,#anchor2...)
标题顺序
添加锚点标识
Array.prototype.forEach.call(tempArray,array) {
item.setAttribute('id','anchor' + (1+index));
});
在文章左侧显示目录，目录显示的内容就是对应章节的题目
全局变量Atitle保存
添加锚点标识的
标题项
var aTitle = setCatalog();
/*
生成目录*/
function buildCatalog(arr){
//由于每个部件的创建过程都类似，所以写成一个
函数进行服用
function buildPart(json){
var oPart = document.createElement(json.selector);
if(json.id){oPart.setAttribute('id',json.id);}
if(json.className){oPart.className = json.className;}
if(json.innerHTML){oPart.innerHTML = json.innerHTML;}
if(json.href){oPart.setAttribute('href',json.href);}
if(json.appendTo
Box){
o
Box.appendChild(oPart);
}
return oPart;
}
//取得章节
标题的个数
len = arr.length;
//创建最外层div
var o
Box = buildPart({
selector:'div',id:'
Box',className:'
Box'
});
//创建
关闭按钮
buildPart({
selector:'span',id:'
BoxQuit',className:'
Box-quit',innerHTML:'×',appendTo
Box:true
});
//创建目录
标题
buildPart({
selector:'h6',className:'
Box-title',innerHTML:'目录',appendTo
Box:true
});
//创建目录项
for(var i = 0; i < len; i++){
buildPart({
selector:'a',className:'
Box-anchor',href:'#anchor' + (1+i),innerHTML:'['+(i+1)+']'+arr[i].innerHTML,appendTo
Box:true
});
}
//将目录加入文档中
document.body.appendChild(o
Box);
}
buildCatalog(aTitle);
目录样式
为目录设置样式，最外层div设置最小宽度和最大宽度。当目录项太宽时，显示...。由于最终要封装为一个js文件，所以样式采用动态样式的形式
Box{position: fixed; left: 10px;top: 60px;font:16px/30px '宋体'; border: 2px solid #ccc;padding: 4px; border-radius:5px;min-width:80px;max-width:118px;overflow:hidden;cursor:default;}\
.
BoxHide{border:none;width:60px;height:30px;padding:0;}\
.
Box-title{text-align:center;font-size:20px;color:#ccc;}\
.
Box-quit{position: absolute; right: 0;top: 4px;cursor:pointer;font-weight:bold;}\
.
Box-anchor{display:block;text-decoration:none;color:black; border-left: 3px solid transparent;padding:0 3px;margin-bottom: 3px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}\
.
Box-anchor:hover{color:#3399ff;}\
.
Box-anchorActive{color:#3399ff;text-decoration:underline;border-color:#2175bc};");
};
点击事件
为各目录项增加点击事件，使用事件代理，增加性能
函数
function anchorActive(obj){
var parent = obj.parentNode;
var aAnchor = parent.getElementsByTagName('a');
//将所有目录项样式设置为默认状态
Array.prototype.forEach.call(aAnchor,array){
item.className = '
Box-anchor';
})
//将当前目录项样式设置为点击状态
obj.className = '
Box-anchor
Box-anchorActive';
}
var o
Box = document.getElementById('
Box');
//设置目录内各组件的点击事件
o
Box.onclick = function(e){
e = e || event;
var target = e.target || e.srcElement;
//
获取target的href值
var sHref = target.getAttribute('href');
//设置目录项的点击事件
if(/anchor/.test(sHref)){
anchorActive(target);
}
}
目录有时是有用的，但有时又是碍事的。所以，为目录添加一个关闭按钮，使其隐藏，目录内容全部消失，关闭按钮变成“显示目录”四个字。再次点击则完全显示
由于后续的拖拽功能需要使用点击事件。所以，重新显示目录的事件使用双击实现
Box = document.getElementById('
Box');
//设置目录内各组件的点击事件
o
Box.onclick = function(e){
e = e || event;
var target = e.target || e.srcElement;
//设置
关闭按钮的点击事件
if(target.id == '
BoxQuit'){
target.innerHTML = '
显示目录';
target.style.background = '#3399ff';
this.className = '
Box BoxHide';
}
}
//设置
关闭按钮的双击事件
var o
BoxQuit = document.getElementById('
BoxQuit');
o
BoxQuit.ondblclick = function(){
this.innerHTML = '×';
this.style.background = '';
this.parentNode.className = '
Box';
}
当使用滚轮时，触发滚轮事件，当前目录对应可视区内相应的文章内容
获取列表项
var aAnchor = o
Box.getElementsByTagName('a');
//
获取章节题目项
aTitle.forEach(function(item,array){
//
获取当前章节题目离可视区上侧的距离
var iTop = item.getBoundingClientRect().top;
//
获取下一个章节题目
var oNext = array[index+1];
//如果存在下一个章节题目，则
获取下一个章节题目离可视区上侧的距离
if(oNext){
var iNextTop = array[index+1].getBoundingClientRect().top;
}
//当前章节题目离可视区上侧的距离小于10时
if(iTop <= 10){
//当下一个章节题目不存在， 或下一个章节题目离可视区上侧的距离大于10时，设置当前章节题目对应的目录项为激活态
if(iNextTop > 10 || !oNext){
anchorActive(aAnchor[index]);
}
}
});
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);
由于不同计算机的分辨率不同，所以目录的显示位置也不同。为目录增加一个拖拽功能，可以把其放在任意合适的地方
Box.onmousedown = function(e){
e = e || event;
//
获取元素距离定位父级的x轴及y轴距离
var x0 = this.offsetLeft;
var y0 = this.offsetTop;
//
获取此时鼠标距离视口左上角的x轴及y轴距离
var x1 = e.clientX;
var y1 = e.clientY;
document.onmousemove = function(e){
e = e || event;
//
获取此时鼠标距离视口左上角的x轴及y轴距离
x2 = e.clientX;
y2 = e.clientY;
//计算此时元素应该距离视口左上角的x轴及y轴距离
var X = x0 + (x2 - x1);
var Y = y0 + (y2 - y1);
//将X和Y的值赋给left和top，使元素移动到相应位置
o
Box.style.left = X + 'px';
o
Box.style.top = Y + 'px';
}
document.onmouseup = function(e){
//当鼠标抬起时，拖拽结束，则将onmousemove赋值为null即可
document.onmousemove = null;
//释放全局捕获
if(o
Box.releaseCapture){
o
Box.releaseCapture();
}
}
//阻止默认行为
return false;
//IE8-浏览器阻止默认行为
if(o
Box.setCapture){
o
Box.setCapture();
}
}
Box{position: fixed; left: 10px;top: 60px;font:16px/30px '宋体'; border: 2px solid #ccc;padding: 4px; border-radius:5px;min-width:80px;max-width:118px;overflow:hidden;cursor:default;background:rgba(0,0.1);}\
.
BoxHide{border:none;width:60px;height:30px;padding:0;}\
.
Box-title{text-align:center;font-size:20px;color:#444;}\
.
Box-quit{position: absolute;text-align:center; right: 0;top: 4px;cursor:pointer;font-weight:bold;}\
.
Box-quitAnother{background:#3399ff;left:0;top:0;}\
a.
Box-anchor{display:block;text-decoration:none;color:black; border-left: 3px solid transparent;padding:0 3px;margin-bottom: 3px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}\
a.
Box-anchor:hover{color:#3399ff;}\
a.
Box-anchorActive{color:#3399ff;text-decoration:underline;border-color:#2175bc};");
};
/*设置章节
标题函数*/
function setCatalog(){
//
获取页面中所有的script
标题
var aEle = document.getElementsByTagName('script');
//设置sel变量，用于保存其选择符的字符串值
var sel;
//
获取script
标签上的data-selector值
Array.prototype.forEach.call(aEle,array){
sel = item.getAttribute('data-selector');
if(sel) return;
})
//默认参数为h3
标签
if(sel == undefined){
sel ='h3';
}
//选取博文
var article = document.getElementById('cnblogs_post_body');
//选取
文章中所有的章节
标题
var tempArray = article.querySelectorAll(sel);
//为每一个章节
标题顺序
添加锚点标识
Array.prototype.forEach.call(tempArray,'anchor' + (1+index));
});
//返回章节
标题这个类数组
return tempArray;
}
//设置
全局变量Atitle保存
添加锚点标识的
标题项
var aTitle = setCatalog();
/生成目录/
function buildCatalog(arr){
//由于每个部件的创建过程都类似，所以写成一个函数进行服用
function buildPart(json){
var oPart = document.createElement(json.selector);
if(json.id){oPart.setAttribute('id',appendToBox:true
});
}
//将目录加入文档中
document.body.appendChild(oBox);
}
buildCatalog(aTitle);
/事件部分/
(function(){
var oBox = document.getElementById('Box');
//设置目录内各组件的点击事件
oBox.onclick = function(e){
e = e || event;
var target = e.target || e.srcElement;
//设置关闭按钮的点击事件
if(target.id == 'BoxQuit'){
target.innerHTML = '显示目录';
target.className = 'Box-quit Box-quitAnother'
this.className = 'Box BoxHide';
}
//获取target的href值
var sHref = target.getAttribute('href');
//设置目录项的点击事件
if(/anchor/.test(sHref)){
anchorActive(target);
}
}
/设置关闭按钮的双击事件/
var oBoxQuit = document.getElementById('BoxQuit');
oBoxQuit.ondblclick = function(){
this.innerHTML = '×';
this.className = 'Box-quit';
this.parentNode.className = 'Box';
}
//由于点击事件和滚轮事件都需要将目录项发生样式变化，所以声明锚点激活函数
function anchorActive(obj){
var parent = obj.parentNode;
var aAnchor = parent.getElementsByTagName('a');
//将所有目录项样式设置为默认状态
Array.prototype.forEach.call(aAnchor,array){
item.className = 'Box-anchor';
})
//将当前目录项样式设置为点击状态
obj.className = 'Box-anchor Box-anchorActive';
}
//设置滚轮事件
var wheel = function(e){
//获取列表项
var aAnchor = oBox.getElementsByTagName('a');
//获取章节题目项
aTitle.forEach(function(item,array){
//获取当前章节题目离可视区上侧的距离
var iTop = item.getBoundingClientRect().top;
//获取下一个章节题目
var oNext = array[index+1];
//如果存在下一个章节题目，则获取下一个章节题目离可视区上侧的距离
if(oNext){
var iNextTop = array[index+1].getBoundingClientRect().top;
}
//当前章节题目离可视区上侧的距离小于10时
if(iTop <= 10){
//当下一个章节题目不存在， 或下一个章节题目离可视区上侧的距离大于10时，设置当前章节题目对应的目录项为激活态
if(iNextTop > 10 || !oNext){
anchorActive(aAnchor[index]);
}
}
});
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',false);
//拖拽实现
oBox.onmousedown = function(e){
e = e || event;
//获取元素距离定位父级的x轴及y轴距离
var x0 = this.offsetLeft;
var y0 = this.offsetTop;
//获取此时鼠标距离视口左上角的x轴及y轴距离
var x1 = e.clientX;
var y1 = e.clientY;
document.onmousemove = function(e){
e = e || event;
//获取此时鼠标距离视口左上角的x轴及y轴距离
x2 = e.clientX;
y2 = e.clientY;
//计算此时元素应该距离视口左上角的x轴及y轴距离
var X = x0 + (x2 - x1);
var Y = y0 + (y2 - y1);
//将X和Y的值赋给left和top，使元素移动到相应位置
oBox.style.left = X + 'px';
oBox.style.top = Y + 'px';
}
document.onmouseup = function(e){
//当鼠标抬起时，拖拽结束，则将onmousemove赋值为null即可
document.onmousemove = null;
//释放全局捕获
if(oBox.releaseCapture){
oBox.releaseCapture();
}
}
//阻止默认行为
return false;
//IE8-浏览器阻止默认行为
if(oBox.setCapture){
oBox.setCapture();
}
}
})();
};
最后
如果有自己的需求，可以把代码下载下来，进行相应参数的修改
如果点击右键，会出现自定义右键菜单，包括回到顶部、点赞、评论这三个功能；如果按住ctrl键，再点击右键，则出现原生的右键菜单。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程之家！
原文链接：https://www.f2er.com/js/43706.html
