JS and CSS Implementation footnote (Footnote) effect

Footnotes (Footnote) are an excellent way to provide more information to users and an effective complement to the subject information, which is common in a variety of printed books. However, since footnotes have these benefits, of course we have to take advantage of them in Web pages, this article gives you a way to implement footnote effects with JavaScript and CSS.

Javascript:

<script type= "Text/javascript" >
Description: Implement footnote (Footnote) effects with Javascript and CSS
Author: codebit.cn (http://www.CodeBit.cn)
var footnotes = function () {};
Footnotes.prototype = {
Footnoteclassname: "Footnote",//footnote className
Footnotetagname: "Span",//footnote label name
Footnotebacklink: "[Back]",//Return link
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)
{
Get footer Contents
Elcontent = spans[i].innerhtml;
Notearr.push (elcontent);
Create a link to a footnote
var Newele = document.createelement ("a");
Newele.href = ' #ftn_ ' + Footnoteid + ' _ ' + Note;
Newele.title = "Show footnote";
newele.id = ' Ftnlink_ ' +footnoteid+ ' _ ' + Note;
newele.innerhtml = Note;
Empty the original content
while (Spans[i].childnodes.length)
{
Spans[i].removechild (Spans[i].firstchild);
}
Spans[i].appendchild (Newele);
}
}
Create a comment list
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];
To create a "back" link
var link = document.createelement ("a");
Link.href = "#ftnlink_" + Noteid + "_" + I;
link.innerhtml = This.footnotebacklink;
Li.appendchild (link);
Ul.appendchild (LI);
}
return ul;
}
};
</script>