你的位置:首页 > Java教程

[Java教程]JS自动生成博文目录BOOK皮肤


说明

      最近看到许多博主的页面特别漂亮,都有目录导航,方便大家阅读浏览。于是一搜索,发现已经有很多相应的教程《JS自动生成博文目录》。

      但是没有一个针对BOOk皮肤的,比较喜欢这个皮肤,那就自己动手实现一个咯。

      具体代码就不做过多介绍了,其他博主已经介绍的很仔细咯。      

HTML代码 

<div id="sideBar">  <div id="sideBar_title">文章目录</div>  <div id="siderBar_contents" style="display:none">    </div></div>

CSS代码 

 #sideBar{      position:fixed;      left:0;      top:50;      width:auto;      height:auto;      z-index:999;      cursor:pointer;    } #sideBar_title{      float:left;      width:40px;      border-radius:0 15% 10% 0;      text-align:center;      font-weight:bold;      color:white;      font-size:23px;      background-color:#93c8a2;    } #siderBar_contents{      float:left;      margin-left:10px;      max-width:300px;      min-width:200px;      background-color:#93c8a2;      min-height:200px;      opacity:0.9;      font-size:16px;      color:white;      border-radius:5%;      text-indent: 1em;      line-height: 1.5em;    }#siderBar_contents a{      color:white;      text-decoration:none;    }#siderBar_contents a:hover{      text-decoration:underline;    }#cnblogs_post_body h2,h3{  background-color: #93c8a2;  color:white;  border-radius:2%;  text-indent: 0.8em;}

JS代码

 

 var sideBar = document.getElementById('sideBar'); var sideBar_title = document.getElementById('sideBar_title'); var siderBar_contents = document.getElementById('siderBar_contents'); sideBar.onmouseover = function(){   siderBar_contents.style.display = 'block'; } sideBar.onmouseout = function(){   siderBar_contents.style.display = 'none';
}var h_list = document.querySelectorAll('#cnblogs_post_body h2,h3,h4,h5'); var str='<dl>'; if(h_list.length==3){ sideBar_title.style.display = 'none';}for(var i=0; i< h_list.length;i++){ if('导航统计公告'.indexOf(h_list[i].innerHTML)>-1){ continue; } if(h_list[i].nodeName.toLocaleLowerCase()=='h2'){ str +='<dt><a href="#'+i+'">'+h_list[i].innerHTML+'</a></dt>' }else{ str +='<dd><a href="#'+i+'">'+h_list[i].innerHTML+'</a></dd>' } //对原先的h标签,增加id值 h_list[i].id = i;}str+='</dl>';siderBar_contents.innerHTML=str;

参考文章:

http://www.cnblogs.com/xdp-gacl/p/3718879.html