原始html如下
<div id="wrapper">
<h1>x</h1>
<h2>xx</h2>
<h3>xxx</h3>
<h4>xxxx</h4>
<h5>xxxx</h5>
<h2>xx</h2>
<h3>xxx</h3>
<h4>xxxx</h4>
<h3>xxx</h3>
<h4>xxxx</h4>
<h5>xxxx</h5>
</div>
核心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('#wrapper h1,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(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_list[i].id = i;
}
str+='</dl>';
siderBar_contents.innerHTML=str;
css代码
#sideBar{position:fixed;right:0;top:10px;width:auto;height:auto;z-index:999;cursor:pointer}
#sideBar_title{float:right;width:30px;text-align:center;font-weight:bold;color:white;font-size:18px;background-color:#ff3c73}
#siderBar_contents{float:left;padding:0 10px;margin-left:10px;min-width:100px;height:520px;background-color:#ff3c73;opacity:0.9;font-size:16px;color:white;line-height:1.5em;overflow:auto;border-radius:10px 0 10px 10px}
#siderBar_contents a{color:white;font-size:14px;text-decoration:none}
#siderBar_contents a:hover{text-decoration:underline}
根据自己需要再调整
最终样式
版权属于: 吕滔博客
原文地址: https://lvtao.net/web/2123.html
转载时必须以链接形式注明原始出处及本声明。
[abc] |
匹配中括号中的单个字符,如a或b或c |
[^abc] |
匹配除了a、b、c等字符的其他单个字符 |
[a-z] |
匹配一个字符范围,如a到z |
[a-zA-Z] |
匹配一个字符范围,如a-z 或 A-Z |
^ |
匹配行的开始 |
$ |
匹配行的结束 |
\A |
匹配一个字符串的开始 |
\z |
匹配一个字符串的结束 |
. |
匹配任意单个字符 |
\s |
匹配空白字符,如空格,TAB |
\S |
匹配非空白字符 |
\d |
匹配一个数字 |
\D |
匹配非数字 |
\w |
匹配一个字母 |
\W |
匹配非字母 |
\b |
匹配字符边界 |
(...) |
引用所有括号中的内容 |
(a|b) |
a或者b |
a? |
零个或1个a |
a* |
零个或多个a |
a+ |
1个或多个a |
a{3} |
3次重复的a |
a{3,} |
3次或3次以上重复的a |
a{3,6} |
3到6次重复的a |
修正符 | |
/g |
查找所有可能的匹配 |
/i |
不区分大小写 |
/m |
多行匹配 |
/s |
单行匹配 |
/x |
忽略空白模式 |
/e |
可执行模式,PHP专有 |
/A |
强制从目标字符串开头匹配 |
/D |
使用$限制结尾字符,则不允许结尾有换行 |
/U |
只匹配最近的一个字符串;不重复匹配 |
添加新评论