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

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

1.  
2. <script type= "text/javascript">
3.  
4. // 说明：用 Javascript 和 CSS 实现脚注（Footnote）效果
5. // 作者：CodeBit.cn ( http://www.CodeBit.cn )
6.  
7. var footNotes = function ( ) { };
8.  
9. footNotes. prototype = {
10.  
11.     footNoteClassName : "footnote",    // 脚注的 className
12.     footNoteTagName : "span",    // 脚注的标签名
13.     footNoteBackLink : " [back]",    // 返回链接
14.  
15.     format : function (contentID, footnoteID )
16.     {
17.         if (!document. getElementById ) return false;
18.  
19.         var content = document. getElementById (contentID );
20.         var footnote = document. getElementById (footnoteID );
21.  
22.         var spans = content. getElementsByTagName ( this. footNoteTagName );
23.  
24.         var noteArr = [ ];
25.         var note = 0;
26.         
27.         var elContent;
28.  
29.         var len = spans. length;
30.         for (i= 0; i<len; i++ )
31.         {
32.             note ++;
33.  
34.             if (spans [i ]. className == this. footNoteClassName )
35.             {
36.                 // 获取脚注内容
37.                 elContent = spans [i ]. innerHTML;
38.  
39.                 noteArr. push (elContent );
40.  
41.                 // 创建一个指向脚注的链接
42.                 var newEle = document. createElement ( "a" );
43.                 newEle. href = '#ftn_' + footnoteID + '_' + note;
44.                 newEle. title = "show footnote";
45.                 newEle. id = 'ftnlink_'+footnoteID+ '_' + note;
46.                 
47.                 newEle. innerHTML = note;
48.                 
49.                 // 清空原有内容
50.                 while (spans [i ]. childNodes. length )
51.                 {
52.                     spans [i ]. removeChild ( spans [i ]. firstChild );
53.                 }
54.                 
55.                 spans [i ]. appendChild ( newEle );
56.             }
57.         }
58.  
59.         // 创建注释列表
60.         var ul = this.__buildNoteList (noteArr, footnoteID );
61.  
62.         footnote. appendChild (ul );
63.  
64.     },
65.  
66.     __buildNoteList : function (notes, noteID ) 
67.     {
68.         if (!notes || notes. length < 1 ) return;
69.         
70.         var ul = document. createElement ( 'ul' );
71.  
72.         ul. className = this. footNoteClassName;
73.  
74.         var li;
75.  
76.         var len = notes. length + 1;
77.         for (i= 1; i<len; i++ )
78.         {
79.             li = document. createElement ( 'li' );
80.             li. id = "ftn_"+noteID+ "_"+i;
81.  
82.             li. innerHTML = notes [i -1 ];
83.  
84.             // 创建【返回】链接
85.             var link = document. createElement ( "a" );
86.             link. href = "#ftnlink_" + noteID + "_" + i;
87.  
88.             link. innerHTML = this. footNoteBackLink;
89.  
90.             li. appendChild ( link );
91.  
92.             ul. appendChild ( li );
93.         }
94.  
95.         return ul;
96.     }
97. };
98.  
99. </script>
100.  

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

1.  
2. <div id="article1">
3.  
4. CSS <span class="footnote">CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 </span>
5.  
6. </div>
7.     
8. <div id="artnotes1" class="footnoteHolder"> </div>
9.  

其中：
article1 是你需要脚注的文章主体
<span class="footnote"> .. </span> 是注释内容，标签 span 和 class 均可配置。
artnotes1 是显示脚注的地方


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

   
   

     
     

      
       
     
     

     
     

      
      <script type=
      
      "text/javascript"> 
     
     

     
     

      
       
     
     

     
     
    
      
      var footnote = 
      
      new footNotes
      
      (
      
      ); 
     
     

     
     

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

     
     

      
       
     
     

     
     

      
      </script> 
     
     

     
     

      
       
     
     

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

   
   

     
     

      
       
     
     

     
     

      
      <script type=
      
      "text/javascript"> 
     
     

     
     

      
       
     
     

     
     
    
      
      var footnote = 
      
      new footNotes
      
      (
      
      ); 
     
     

     
     

      
          footnote.
      
      footNoteClassName = 
      
      "footnote2"; 
     
     

     
     

      
          footnote.
      
      footNoteTagName = 
      
      "em"; 
     
     

     
     

      
          footnote.
      
      footNoteBackLink = 
      
      " [back &laquo;]"; 
     
     

     
     

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

     
     

      
       
     
     

     
     

      
      </script>