用Javascript和CSS实现脚注（Footnote）效果
JavaScriptCSS 实现 效果
2023-06-13 09:14:12 时间
不过，既然脚注有这些好处，我们当然要在网页中也加以利用，本文向您介绍了用Javascript和CSS实现脚注效果的方法。
复制代码代码如下:
<scripttype="text/javascript">
//说明：用Javascript和CSS实现脚注（Footnote）效果
varfootNotes=function(){};
footNotes.prototype={
footNoteClassName:"footnote",//脚注的className
footNoteTagName:"span",//脚注的标签名
footNoteBackLink:"[back]",//返回链接
format:function(contentID,footnoteID)
{
if(!document.getElementById)returnfalse;
varcontent=document.getElementById(contentID);
varfootnote=document.getElementById(footnoteID);
varspans=content.getElementsByTagName(this.footNoteTagName);
varnoteArr=[];
varnote=0;
varelContent;
varlen=spans.length;
for(i=0;i<len;i++)
{
note++;
if(spans[i].className==this.footNoteClassName)
{
//获取脚注内容
elContent=spans[i].innerHTML;
noteArr.push(elContent);
//创建一个指向脚注的链接
varnewEle=document.createElement("a");
newEle.href="#ftn_"+footnoteID+"_"+note;
newEle.title="showfootnote";
newEle.id="ftnlink_"+footnoteID+"_"+note;
newEle.innerHTML=note;
//清空原有内容
while(spans[i].childNodes.length)
{
spans[i].removeChild(spans[i].firstChild);
}
spans[i].appendChild(newEle);
}
}
//创建注释列表
varul=this.__buildNoteList(noteArr,footnoteID);
footnote.appendChild(ul);
},
__buildNoteList:function(notes,noteID)
{
if(!notes||notes.length<1)return;
varul=document.createElement("ul");
ul.className=this.footNoteClassName;
varli;
varlen=notes.length+1;
for(i=1;i<len;i++)
{
li=document.createElement("li");
li.id="ftn_"+noteID+"_"+i;
li.innerHTML=notes[i-1];
//创建【返回】链接
varlink=document.createElement("a");
link.href="#ftnlink_"+noteID+"_"+i;
link.innerHTML=this.footNoteBackLink;
li.appendChild(link);
ul.appendChild(li);
}
returnul;
}
};
</script>
要实现脚注，我们需要下列元素：
<divid="article1">
CSS<spanclass="footnote">CSS是CascadingStyleSheet的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</span>
</div>
<divid="artnotes1"class="footnoteHolder"></div>
其中：
article1是你需要脚注的文章主体
<spanclass="footnote">..</span>是注释内容，标签span和class均可配置。
artnotes1是显示脚注的地方
按照默认的设置调用方式：
<scripttype="text/javascript">
varfootnote=newfootNotes();
footnote.format("article1","artnotes1");
</script>
如果你想自定义一些内容，可以用下面的方式：
<scripttype="text/javascript">
varfootnote=newfootNotes();
footnote.footNoteClassName="footnote2";
footnote.footNoteTagName="em";
footnote.footNoteBackLink="[back«]";
footnote.format("article1","artnotes1");
</script>
测试代码：将下面的代码保存运行。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="content-type"content="text/html;charset=gb2312"/>
<metaname="keywords"content="注释,css,Javascript,footnote,脚注,"/>
<metaname="description"content="脚注（Footnote）是向用户提供更多信息的一个最佳途径，也是主体信息的一个有效补充，常见于各种印刷书籍中。不过，既然脚注有这些好处，我们当然要在网页中也加以利用，本文向您介绍了用Javascript和CSS实现脚注效果的方法。"/>
<title>用Javascript和CSS实现脚注（Footnote）效果-注释,css,Javascript,footnote,脚注,</title>
</head>
<body>
<divclass="ad">
</div>
<br/>
<divid="example">
<h3id="example_title">用 Javascript 和 CSS 实现脚注（Footnote）效果</h3>
<divid="example_main">
<!--*************************************实例代码开始*************************************-->
<styletype="text/css">
a{
font-weight:bold;
text-decoration:none;
color:#f30;
}
a:hover{
color:#FFA200;
}
#wrapper{
width:500px;
margin:0auto;
text-align:left;
}
#wrapperp{line-height:200%;font-size:14px;}
/*
================================================
stylingforfootnotesbeginshere
================================================
*/
div.footnoteHolder{
border-left:1pxsolid#ccc;
margin:20px050px20px;
padding:20px10px;
font-size:12px;
line-height:150%;
}
span.footnote{
vertical-align:super;
font-size:10px;
}
ul.footnote,ul.footnoteli{
margin:0;
padding:0;
}
ul.footnoteli{
list-style-type:decimal;
margin:3px03px20px;
color:#777;
}
em.footnote2{
vertical-align:super;
font-size:10px;
}
ul.footnote2,ul.footnote2li{
margin:0;
padding:0;
}
ul.footnote2li{
list-style-type:decimal;
margin:3px03px20px;
color:#678BB2;
}
</style>
<scripttype="text/javascript">
//说明：用Javascript和CSS实现脚注（Footnote）效果
//作者：CodeBit.cn(http://www.CodeBit.cn)
varfootNotes=function(){};
footNotes.prototype={
footNoteClassName:"footnote", //脚注的className
footNoteTagName:"span", //脚注的标签名
footNoteBackLink:"[back]", //返回链接
format:function(contentID,footnoteID)
{
if(!document.getElementById)returnfalse;
varcontent=document.getElementById(contentID);
varfootnote=document.getElementById(footnoteID);
varspans=content.getElementsByTagName(this.footNoteTagName);
varnoteArr=[];
varnote=0;
varelContent;
varlen=spans.length;
for(i=0;i<len;i++)
{
note++;
if(spans[i].className==this.footNoteClassName)
{
//获取脚注内容
elContent=spans[i].innerHTML;
noteArr.push(elContent);
//创建一个指向脚注的链接
varnewEle=document.createElement("a");
newEle.href="#ftn_"+footnoteID+"_"+note;
newEle.title="showfootnote";
newEle.id="ftnlink_"+footnoteID+"_"+note;
newEle.innerHTML=note;
//清空原有内容
while(spans[i].childNodes.length)
{
spans[i].removeChild(spans[i].firstChild);
}
spans[i].appendChild(newEle);
}
}
//创建注释列表
varul=this.__buildNoteList(noteArr,footnoteID);
footnote.appendChild(ul);
},
__buildNoteList:function(notes,noteID)
{
if(!notes||notes.length<1)return;
varul=document.createElement("ul");
ul.className=this.footNoteClassName;
varli;
varlen=notes.length+1;
for(i=1;i<len;i++)
{
li=document.createElement("li");
li.id="ftn_"+noteID+"_"+i;
li.innerHTML=notes[i-1];
//创建【返回】链接
varlink=document.createElement("a");
link.href="#ftnlink_"+noteID+"_"+i;
link.innerHTML=this.footNoteBackLink;
li.appendChild(link);
ul.appendChild(li);
}
returnul;
}
};
</script>
<divid="wrapper">
<divid="content">
<divid="article1">
<h2>Article1</h2>
<p>在编程的过程中，我们通常都会积累很多简单、有效并且可重用的小段代码，一个简单的字符串处理函数<spanclass="footnote">函数是将唯一的输出值赋予每一输入的『法则』(Wikipedia)。</span>或者一个验证邮件地址的正则表达式<spanclass="footnote">正则表达式(RegularExpression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。</span>，又或者一个简单的文件上传类，甚至一个效果不错的CSS<spanclass="footnote">CSS是CascadingStyleSheet的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</span>导航样式。这些小技巧为我们节省了不少时间，但是时间一长，代码数量越来越多，寻找起来也耗费了不少时间。因此，本站致力于收集整理一些类似的小知识，并且努力提高文章搜索质量，一来方便大家查阅，二来也算是支持一下开源事业。
</p>
<p>本站收集的代码和教程中，有从世界著名开源软件中摘取的函数、类<spanclass="footnote">类是对某个对象的定义。它包含有关对象动作方式的信息，包括它的名称、方法、属性和事件。</span>，也有网友提交的原创或翻译的精彩文章。本站的收录代码的标准是：简单、精彩、通用。
</p>
</div>
<divid="artnotes1"class="footnoteHolder"></div>
<divid="article2">
<h2>Article2</h2>
<p>在编程的过程中，我们通常都会积累很多简单、有效并且可重用的小段代码，一个简单的字符串处理函数<emclass="footnote2">函数是将唯一的输出值赋予每一输入的『法则』(Wikipedia)。</em>或者一个验证邮件地址的正则表达式<emclass="footnote2">正则表达式(RegularExpression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。</em>，又或者一个简单的文件上传类，甚至一个效果不错的CSS<emclass="footnote2">CSS是CascadingStyleSheet的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</em>导航样式。这些小技巧为我们节省了不少时间，但是时间一长，代码数量越来越多，寻找起来也耗费了不少时间。因此，本站致力于收集整理一些类似的小知识，并且努力提高文章搜索质量，一来方便大家查阅，二来也算是支持一下开源事业。
</p>
<p>本站收集的代码和教程中，有从世界著名开源软件中摘取的函数、类<emclass="footnote2">类是对某个对象的定义。它包含有关对象动作方式的信息，包括它的名称、方法、属性和事件。</em>，也有网友提交的原创或翻译的精彩文章。本站的收录代码的标准是：简单、精彩、通用。
</p>
</div>
<divid="artnotes2"class="footnoteHolder"></div>
</div>
<scripttype="text/javascript">
//<![CDATA[
varfootnote=newfootNotes();
footnote.format("article1","artnotes1");
varfootnote2=newfootNotes();
footnote2.footNoteClassName="footnote2";
footnote2.footNoteTagName="em";
footnote2.footNoteBackLink="[back«]";
footnote2.format("article2","artnotes2");
//]]>
</script>
</div>
<!--*************************************实例代码结束*************************************-->
</div>
<divid="back"><ahref="/pub/html/javascript/tip/footnotes_with_javascript_and_css/">返回『用Javascript和CSS实现脚注（Footnote）效果』</a></div>
</div>
<br/>
<divclass="ad">
</div>
</body>
</html>
相关文章
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- JavaScript数组filter方法
- 【说站】javascript生成器函数的特点
- java作用域-javaScript预编译、作用域，作用域链详解
- 什么是 RUM JavaScript
- HTML/CSS/JavaScript学习笔记持续更新详解编程语言
- JavaScript与Java的区别
- CSS与MySQL合力提升网页性能（css与mysql结合）
- MySQL登陆系统CSS实现一键登录（css mysql登陆）
- 器使用Oracle CSS服务器提升业务效率（oracle css服务）
- 优化JavaScript脚本的性能的几个注意事项
- [HTML/CSS/Javascript]WWTJS
- javascript获取特定的CSS属性值
- CSS教程之css选择器、属性、值
- 多浏览器兼容的动态加载JavaScript与CSS
- javascript动态加载css方法总结
- 简单的加密css地址防止别人下载你的CSS文件的方法
- Javascript实现的CSS代码高亮显示
- javascript与CSS复习（《精通javascript》）
- 浅谈Javascript事件处理程序的几种方式
- javascript构造函数强制调用经验总结
- 用JavaScript修改CSS属性的代码
- 浅析JavaScript中的CSS属性及命名规范
- JavaScript+CSS控制打印格式示例介绍
- javascript中验证大写字母、数字和中文
- IE8中使用javascript动态加载CSS的解决方法
- JavaScript中伪协议javascript:使用探讨
- javascript实现动态加载CSS
- javascript实现浏览器窗口传递参数的方法