详细解释自动生成博客目录案例_javascript手艺_脚本之家

前边的话

有对象在博客上边留言,询问博客目录是怎样变化的。接下来就详细介绍达成进程

操作说明

有关博客目录自动生成,已经封装成catalog.js文件,只要援用该公文就可以

金沙8331网址,详细解释自动生成博客目录案例_javascript手艺_脚本之家。//暗中同意地,为页面上全部的h3标签生成目录

//也许,为页面上富有的竹签生成目录

正如图所示,张开HTML源代码编辑器,在最后引进js就能够

1、点击目录项,对应章节标题将展现在可视区上方

2、滚动滚轮,目录项会对应章节标题标浮动而相应地扭转

3、点击目录右上角的停业开关,能够将引得裁减为”显示目录”八个字,双击裁减后的目录,可复原私下认可状态

4、目录能够拖拽至任性地点

目录参照

率先,要明确的是,基于什么变化目录。是小说中的

标签,照旧小说中的的价签。所以,更人性化的做法是,将其视作参数,暗许参数为

标签

是因为乐乎的博文除了本人生成的博客内容外,新浪还有只怕会增进诸如斟酌、布告、广告等成分。所以,第一步要先稳住博文

博文最后都处于的div中

//DOM结构稳定后再操作window.onload = function(){ /*设置章节标题函数*/ function setCatalog(){ //获取页面中所有的script标题 var aEle = document.getElementsByTagName; //设置sel变量,用于保存其选择符的字符串值 var sel; //获取script标签上的data-selector值 Array.prototype.forEach.call(aEle,function{ sel = item.getAttribute; if //默认参数为h3标签 if{ sel ='h3'; } //选取文章中所有的章节标题 var tempArray = document.querySelectorAll;};

目录连接

目录如何与章节进行对应呢,最常用的就是行使锚点。以基于小说中的

标签生成目录为例,为每二个

标签根据顺序增加锚点

//为每一个章节标题顺序添加锚点标识Array.prototype.forEach.call(tempArray, function { item.setAttribute('id','anchor' + ; 

目录显示

在小说侧边展现目录,目录展现的内容正是对应章节的标题

//设置全局变量Atitle保存添加锚点标识的标题项 var aTitle = setCatalog(); /*生成目录*/ function buildCatalog{ //由于每个部件的创建过程都类似,所以写成一个函数进行服用 function buildPart{ var oPart = document.createElement; if{oPart.setAttribute;} if{oPart.className = json.className;} if{oPart.innerHTML = json.innerHTML;} if{oPart.setAttribute;} if{ oBox.appendChild; } return oPart; } //取得章节标题的个数 len = arr.length; //创建最外层div var oBox = buildPart({ selector:'div', id:'box', className:'box' }); //创建关闭按钮 buildPart({ selector:'span', id:'boxQuit', className:'box-quit', innerHTML:'×', appendToBox:true }); //创建目录标题 buildPart({ selector:'h6', className:'box-title', innerHTML:'目录', appendToBox:true }); //创建目录项 for(var i = 0; i < len; i++){ buildPart({ selector:'a', className:'box-anchor', href:'#anchor' + , innerHTML:'['++']'+arr[i].innerHTML, appendToBox:true }); } //将目录加入文档中 document.body.appendChild; } buildCatalog;

目录样式

为目录设置样式,最外层div设置最小宽度和最大开间。当目录项太宽时,展现…。由于最终要卷入为叁个js文件,所以样式选择动态样式的样式

/*动态样式*/function loadStyles{ loadStyles.mark = 'load'; var style = document.createElement; style.type = "text/css"; try{ style.innerHTML = str; }catch{ style.styleSheet.cssText = str; } var head = document.getElementsByTagName[0]; head.appendChild; }if(loadStyles.mark != 'load'){ loadStyles("h6{margin:0;padding:0;} .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{ var parent = obj.parentNode; var aAnchor = parent.getElementsByTagName; //将所有目录项样式设置为默认状态 Array.prototype.forEach.call(aAnchor,function{ item.className = 'box-anchor'; }) //将当前目录项样式设置为点击状态 obj.className = 'box-anchor box-anchorActive';}var oBox = document.getElementById;//设置目录内各组件的点击事件oBox.onclick = function{ e = e || event; var target = e.target || e.srcElement; //获取target的href值 var sHref = target.getAttribute; //设置目录项的点击事件 if{ anchorActive; }}

隐瞒功效

目录有的时候是可行的,但一时又是麻烦的。所以,为目录加多叁个关门按键,使其隐身,目录内容全方位流失,关闭按键产生“展现目录”多少个字。再度点击则统统体现

出于两次三番的拖拽成效需求利用点击事件。所以,重新展现目录的风浪采用双击完毕

var oBox = document.getElementById;//设置目录内各组件的点击事件oBox.onclick = function{ e = e || event; var target = e.target || e.srcElement; //设置关闭按钮的点击事件 if(target.id == 'boxQuit'){ target.innerHTML = '显示目录'; target.style.background = '#3399ff'; this.className = 'box boxHide'; }} //设置关闭按钮的双击事件var oBoxQuit = document.getElementById;oBoxQuit.ondblclick = function(){ this.innerHTML = '×'; this.style.background = ''; this.parentNode.className = 'box'; }

滚轮作用

当使用滚轮时,触发滚轮事件,当前目录对应可视区内应和的小说内容

//设置滚轮事件var wheel = function{ //获取列表项 var aAnchor = oBox.getElementsByTagName; //获取章节题目项 aTitle.forEach(function{ //获取当前章节题目离可视区上侧的距离 var iTop = item.getBoundingClientRect().top; //获取下一个章节题目 var oNext = array[index+1]; //如果存在下一个章节题目,则获取下一个章节题目离可视区上侧的距离 if{ var iNextTop = array[index+1].getBoundingClientRect().top; } //当前章节题目离可视区上侧的距离小于10时 if{ //当下一个章节题目不存在, 或下一个章节题目离可视区上侧的距离大于10时,设置当前章节题目对应的目录项为激活态 if(iNextTop > 10 || !oNext){ anchorActive; } } });}document.body.onmousewheel = wheel;document.body.addEventListener('DOMMouseScroll',wheel,false);

拖拽作用

出于不相同计算机的分辨率分歧,所以目录的体现地点也不如。为目录扩展贰个拖拽作用,能够把其放在大肆合适的地点

//拖拽实现oBox.onmousedown = function{ 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 || event; //获取此时鼠标距离视口左上角的x轴及y轴距离 x2 = e.clientX; y2 = e.clientY; //计算此时元素应该距离视口左上角的x轴及y轴距离 var X = x0 + ; var Y = y0 + ; //将X和Y的值赋给left和top,使元素移动到相应位置 oBox.style.left = X + 'px'; oBox.style.top = Y + 'px'; } document.onmouseup = function{ //当鼠标抬起时,拖拽结束,则将onmousemove赋值为null即可 document.onmousemove = null; //释放全局捕获 if{ oBox.releaseCapture(); } } //阻止默认行为 return false; //IE8-浏览器阻止默认行为 if{ oBox.setCapture(); }}

代码体现

//DOM结构稳定后,再操作window.onload = function(){ /*动态样式*/ function loadStyles{ loadStyles.mark = 'load'; var style = document.createElement; style.type = "text/css"; try{ style.innerHTML = str; }catch{ style.styleSheet.cssText = str; } var head = document.getElementsByTagName[0]; head.appendChild; } if(loadStyles.mark != 'load'){ loadStyles("h6{margin:0;padding:0;} .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;} .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; //设置sel变量,用于保存其选择符的字符串值 var sel; //获取script标签上的data-selector值 Array.prototype.forEach.call(aEle,function{ sel = item.getAttribute; if //默认参数为h3标签 if{ sel ='h3'; } //选取博文 var article = document.getElementById; //选取文章中所有的章节标题 var tempArray = article.querySelectorAll; //为每一个章节标题顺序添加锚点标识 Array.prototype.forEach.call(tempArray, function { item.setAttribute('id','anchor' + ; //返回章节标题这个类数组 return tempArray; } //设置全局变量Atitle保存添加锚点标识的标题项 var aTitle = setCatalog(); /*生成目录*/ function buildCatalog{ //由于每个部件的创建过程都类似,所以写成一个函数进行服用 function buildPart{ var oPart = document.createElement; if{oPart.setAttribute;} if{oPart.className = json.className;} if{oPart.innerHTML = json.innerHTML;} if{oPart.setAttribute;} if{ oBox.appendChild; } return oPart; } //取得章节标题的个数 len = arr.length; //创建最外层div var oBox = buildPart({ selector:'div', id:'box', className:'box' }); //创建关闭按钮 buildPart({ selector:'span', id:'boxQuit', className:'box-quit', innerHTML:'×', appendToBox:true }); //创建目录标题 buildPart({ selector:'h6', className:'box-title', innerHTML:'目录', appendToBox:true }); //创建目录项 for(var i = 0; i < len; i++){ buildPart({ selector:'a', className:'box-anchor', href:'#anchor' + , innerHTML:'['++']'+arr[i].innerHTML, appendToBox:true }); } //将目录加入文档中 document.body.appendChild; } buildCatalog; /*事件部分*/ { var oBox = document.getElementById; //设置目录内各组件的点击事件 oBox.onclick = function{ 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; //设置目录项的点击事件 if{ anchorActive; } } /*设置关闭按钮的双击事件*/ var oBoxQuit = document.getElementById; oBoxQuit.ondblclick = function(){ this.innerHTML = '×'; this.className = 'box-quit'; this.parentNode.className = 'box'; } //由于点击事件和滚轮事件都需要将目录项发生样式变化,所以声明锚点激活函数 function anchorActive{ var parent = obj.parentNode; var aAnchor = parent.getElementsByTagName; //将所有目录项样式设置为默认状态 Array.prototype.forEach.call(aAnchor,function{ item.className = 'box-anchor'; }) //将当前目录项样式设置为点击状态 obj.className = 'box-anchor box-anchorActive'; } //设置滚轮事件 var wheel = function{ //获取列表项 var aAnchor = oBox.getElementsByTagName; //获取章节题目项 aTitle.forEach(function{ //获取当前章节题目离可视区上侧的距离 var iTop = item.getBoundingClientRect().top; //获取下一个章节题目 var oNext = array[index+1]; //如果存在下一个章节题目,则获取下一个章节题目离可视区上侧的距离 if{ var iNextTop = array[index+1].getBoundingClientRect().top; } //当前章节题目离可视区上侧的距离小于10时 if{ //当下一个章节题目不存在, 或下一个章节题目离可视区上侧的距离大于10时,设置当前章节题目对应的目录项为激活态 if(iNextTop > 10 || !oNext){ anchorActive; } } }); } document.body.onmousewheel = wheel; document.body.addEventListener('DOMMouseScroll',wheel,false); //拖拽实现 oBox.onmousedown = function{ 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 || event; //获取此时鼠标距离视口左上角的x轴及y轴距离 x2 = e.clientX; y2 = e.clientY; //计算此时元素应该距离视口左上角的x轴及y轴距离 var X = x0 + ; var Y = y0 + ; //将X和Y的值赋给left和top,使元素移动到相应位置 oBox.style.left = X + 'px'; oBox.style.top = Y + 'px'; } document.onmouseup = function{ //当鼠标抬起时,拖拽结束,则将onmousemove赋值为null即可 document.onmousemove = null; //释放全局捕获 if{ oBox.releaseCapture(); } } //阻止默认行为 return false; //IE8-浏览器阻止默认行为 if{ oBox.setCapture; };

一旦有友好的须求,能够把代码下载下来,实行对应参数的退换

固然点击右键,会出现自定义右键菜单,包涵回到最上部、点赞、商议那八个功用;要是按住ctrl键,再点击右键,则产出原生的右键菜单。

如上正是本文的全部内容,希望本文的源委对咱们的就学只怕专门的学问能推动一定的提携,同时也期望多多照看脚本之家!

发表评论

电子邮件地址不会被公开。 必填项已用*标注