用Javascript 和 CSS 实现脚注（Footnote）效果

摘要：不过，既然脚注有这些好处，我们当然要在网页中也加以利用，本文向您介绍了用Javascript和CSS实现脚注效果的方法。复制代码代码如下:/...

不过，既然脚注有这些好处，我们当然要在网页中也加以利用，本文向您介绍了用 Javascript 和 CSS 实现脚注效果的方法。

复制代码代码如下:

// 说明：用 Javascript 和 CSS 实现脚注（Footnote）效果

var footNotes = function(){};

footNotes.prototype = {

footNoteClassName : "footnote", // 脚注的 className

footNoteTagName : "span", // 脚注的标签名

footNoteBackLink : " [back]", // 返回链接

format : function(contentID, footnoteID)

{

if (!document.getElementById) return false;

var content = document.getElementById(contentID);

var footnote = document.getElementById(footnoteID);

var spans = content.getElementsByTagName(this.footNoteTagName);

var noteArr = [];

var note = 0;

var elContent;

var len = spans.length;

for (i=0; i<len; i++)

{

note ++;

if (spans[i].className == this.footNoteClassName)

{

// 获取脚注内容

elContent = spans[i].innerHTML;

noteArr.push(elContent);

// 创建一个指向脚注的链接

var newEle = document.createElement( "a" );

newEle.href = '#ftn_' + footnoteID + '_' + note;

newEle.title = "show footnote";

newEle.id = 'ftnlink_'+footnoteID+'_' + note;

newEle.innerHTML = note;

// 清空原有内容

while (spans[i].childNodes.length)

{

spans[i].removeChild( spans[i].firstChild );

}

spans[i].appendChild( newEle );

}

// 创建注释列表

var ul = this.__buildNoteList(noteArr, footnoteID);

footnote.appendChild(ul);

__buildNoteList : function(notes, noteID)

{

if(!notes || notes.length < 1) return;

var ul = document.createElement('ul');

ul.className = this.footNoteClassName;

var li;

var len = notes.length + 1;

for(i=1; i<len; i++)

{

li = document.createElement('li');

li.id = "ftn_"+noteID+"_"+i;

li.innerHTML = notes[i-1];

// 创建【返回】链接

var link = document.createElement("a");

link.href = "#ftnlink_" + noteID + "_" + i;

link.innerHTML = this.footNoteBackLink;

li.appendChild( link );

ul.appendChild( li );

}

return ul;

}

};

</script>

要实现脚注，我们需要下列元素：

复制代码代码如下:

CSS <span>CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</span>

</div>

其中：

article1 是你需要脚注的文章主体

<span> .. </span> 是注释内容，标签 span 和 class 均可配置。

artnotes1 是显示脚注的地方

按照默认的设置调用方式：

复制代码代码如下:

var footnote = new footNotes();

footnote.format('article1','artnotes1');

</script>

如果你想自定义一些内容，可以用下面的方式：

复制代码代码如下:

var footnote = new footNotes();

footnote.footNoteClassName = "footnote2";

footnote.footNoteTagName = "em";

footnote.footNoteBackLink = " [back «]";

footnote.format('article1','artnotes1');

</script>

测试代码：将下面的代码保存运行。

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>用 Javascript 和 CSS 实现脚注（Footnote）效果 - 注释, css, Javascript, footnote, 脚注, </title>

</head>

<body>

<div>

</div>

<br />

<h3 id="example_title">用Javascript和CSS实现脚注（Footnote）效果</h3>

a {

font-weight: bold;

text-decoration: none;

color: #f30;

}

a:hover {

color: #FFA200;

}

#wrapper {

width: 500px;

margin: 0 auto;

text-align: left;

}

#wrapper p {line-height:200%;font-size:14px;}

================================================

styling for footnotes begins here

================================================

div.footnoteHolder {

border-left: 1px solid #ccc;

margin: 20px 0 50px 20px;

padding: 20px 10px;

font-size: 12px;

line-height: 150%;

}

span.footnote {

vertical-align: super;

font-size: 10px;

}

ul.footnote, ul.footnote li {

margin:0;

padding:0;

}

ul.footnote li {

list-style-type:decimal;

margin:3px 0 3px 20px;

color:#777;

}

em.footnote2 {

vertical-align: super;

font-size:10px;

}

ul.footnote2, ul.footnote2 li {

margin:0;

padding:0;

}

ul.footnote2 li {

list-style-type:decimal;

margin:3px 0 3px 20px;

color:#678BB2;

}

</style>

// 说明：用 Javascript 和 CSS 实现脚注（Footnote）效果

// 作者：CodeBit.cn ( http://www.CodeBit.cn )

var footNotes = function(){};

footNotes.prototype = {

footNoteClassName : "footnote",// 脚注的 className

footNoteTagName : "span",// 脚注的标签名

footNoteBackLink : " [back]",// 返回链接

format : function(contentID, footnoteID)

{

if (!document.getElementById) return false;

var content = document.getElementById(contentID);

var footnote = document.getElementById(footnoteID);

var spans = content.getElementsByTagName(this.footNoteTagName);

var noteArr = [];

var note = 0;

var elContent;

var len = spans.length;

for (i=0; i<len; i++)

{

note ++;

if (spans[i].className == this.footNoteClassName)

{

// 获取脚注内容

elContent = spans[i].innerHTML;

noteArr.push(elContent);

// 创建一个指向脚注的链接

var newEle = document.createElement( "a" );

newEle.href = '#ftn_' + footnoteID + '_' + note;

newEle.title = "show footnote";

newEle.id = 'ftnlink_'+footnoteID+'_' + note;

newEle.innerHTML = note;

// 清空原有内容

while (spans[i].childNodes.length)

{

spans[i].removeChild( spans[i].firstChild );

}

spans[i].appendChild( newEle );

}

// 创建注释列表

var ul = this.__buildNoteList(noteArr, footnoteID);

footnote.appendChild(ul);

__buildNoteList : function(notes, noteID)

{

if(!notes || notes.length < 1) return;

var ul = document.createElement('ul');

ul.className = this.footNoteClassName;

var li;

var len = notes.length + 1;

for(i=1; i<len; i++)

{

li = document.createElement('li');

li.id = "ftn_"+noteID+"_"+i;

li.innerHTML = notes[i-1];

// 创建【返回】链接

var link = document.createElement("a");

link.href = "#ftnlink_" + noteID + "_" + i;

link.innerHTML = this.footNoteBackLink;

li.appendChild( link );

ul.appendChild( li );

}

return ul;

}

};

</script>

<h2>Article 1</h2>

<p>在编程的过程中，我们通常都会积累很多简单、有效并且可重用的小段代码，一个简单的字符串处理函数<span>函数是将唯一的输出值赋予每一输入的『法则』(Wikipedia)。</span>或者一个验证邮件地址的正则表达式<span>正则表达式(Regular Expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。</span>，又或者一个简单的文件上传类，甚至一个效果不错的CSS<span>CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 </span>导航样式。这些小技巧为我们节省了不少时间，但是时间一长，代码数量越来越多，寻找起来也耗费了不少时间。因此，本站致力于收集整理一些类似的小知识，并且努力提高文章搜索质量，一来方便大家查阅，二来也算是支持一下开源事业。

</p>

<p>本站收集的代码和教程中，有从世界著名开源软件中摘取的函数、类<span>类是对某个对象的定义。它包含有关对象动作方式的信息，包括它的名称、方法、属性和事件。</span>，也有网友提交的原创或翻译的精彩文章。本站的收录代码的标准是：简单、精彩、通用。

</p>

</div>

<h2>Article 2</h2>

<p>在编程的过程中，我们通常都会积累很多简单、有效并且可重用的小段代码，一个简单的字符串处理函数<em>函数是将唯一的输出值赋予每一输入的『法则』(Wikipedia)。</em>或者一个验证邮件地址的正则表达式<em>正则表达式(Regular Expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。</em>，又或者一个简单的文件上传类，甚至一个效果不错的CSS<em>CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 </em>导航样式。这些小技巧为我们节省了不少时间，但是时间一长，代码数量越来越多，寻找起来也耗费了不少时间。因此，本站致力于收集整理一些类似的小知识，并且努力提高文章搜索质量，一来方便大家查阅，二来也算是支持一下开源事业。

</p>

<p>本站收集的代码和教程中，有从世界著名开源软件中摘取的函数、类<em>类是对某个对象的定义。它包含有关对象动作方式的信息，包括它的名称、方法、属性和事件。</em>，也有网友提交的原创或翻译的精彩文章。本站的收录代码的标准是：简单、精彩、通用。

</p>

</div>

</div>

//<![CDATA[

var footnote = new footNotes();

footnote.format('article1','artnotes1');

var footnote2 = new footNotes();

footnote2.footNoteClassName = "footnote2";

footnote2.footNoteTagName = "em";

footnote2.footNoteBackLink = " [back «]";

footnote2.format('article2','artnotes2');

//]]>

</script>

</div>

<div id="back"><a href="/pub/html/javascript/tip/footnotes_with_javascript_and_css/">返回『用 Javascript 和 CSS 实现脚注（Footnote）效果』</a></div>

</div>

<br />

<div>

</div>

</body>

</html>