Js和CSS实现脚注(Footnote)效果

脚注（Footnote）是向用户提供更多信息的一个最佳途径，也是主体信息的一个有效补充，常见于各种印刷书籍中。不过，既然脚注有这些好处，我们当然要在网页中也加以利用，本文向您介绍了用Javascript和CSS实现脚注效果的方法。

Javascript:

<script type="text/javascript">
// 说明：用 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>