WEB开发网
开发学院网页设计DivCss Js和CSS实现脚注(Footnote)效果 阅读

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

 2008-12-03 19:29:54 来源:WEB开发网   
核心提示: 脚注(Footnote)是向用户提供更多信息的一个最佳途径,也是主体信息的一个有效补充,Js和CSS实现脚注(Footnote)效果,常见于各种印刷书籍中,不过,</span> </div> <div id="artnotes1" class="
    脚注(Footnote)是向用户提供更多信息的一个最佳途径,也是主体信息的一个有效补充,常见于各种印刷书籍中。不过,既然脚注有这些好处,我们当然要在网页中也加以利用,本文向您介绍了用 javascript 和 CSS 实现脚注效果的方法。
Javascript:
  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. var elContent;
  27.  
  28. var len = spans.length;
  29. for (i=0; i<len; i++)
  30. {
  31. note ++;
  32.  
  33. if (spans[i].className == this.footNoteClassName)
  34. {
  35. // 获取脚注内容
  36. elContent = spans[i].innerHTML;
  37.  
  38. noteArr.push(elContent);
  39.  
  40. // 创建一个指向脚注的链接
  41. var newEle = document.createElement( "a" );
  42. newEle.href = '#ftn_' + footnoteID + '_' + note;
  43. newEle.title = "show footnote";
  44. newEle.id = 'ftnlink_'+footnoteID+'_' + note;
  45. newEle.innerHTML = note;
  46. // 清空原有内容
  47. while (spans[i].childNodes.length)
  48. {
  49. spans[i].removeChild( spans[i].firstChild );
  50. }
  51. spans[i].appendChild( newEle );
  52. }
  53. }
  54.  
  55. // 创建注释列表
  56. var ul = this.__buildNoteList(noteArr, footnoteID);
  57.  
  58. footnote.appendChild(ul);
  59.  
  60. },
  61.  
  62. __buildNoteList : function(notes, noteID)
  63. {
  64. if(!notes || notes.length < 1) return;
  65. var ul = document.createElement('ul');
  66.  
  67. ul.className = this.footNoteClassName;
  68.  
  69. var li;
  70.  
  71. var len = notes.length + 1;
  72. for(i=1; i<len; i++)
  73. {
  74. li = document.createElement('li');
  75. li.id = "ftn_"+noteID+"_"+i;
  76.  
  77. li.innerHTML = notes[i-1];
  78.  
  79. // 创建【返回】链接
  80. var link = document.createElement("a");
  81. link.href = "#ftnlink_" + noteID + "_" + i;
  82.  
  83. link.innerHTML = this.footNoteBackLink;
  84.  
  85. li.appendChild( link );
  86.  
  87. ul.appendChild( li );
  88. }
  89.  
  90. return ul;
  91. }
  92. };
  93.  
  94. </script>
  95.  
要实现脚注,我们需要下列元素:
HTML:
  1.  
  2. <div id="article1">
  3.  
  4. CSS <span class="footnote">CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</span>
  5.  
  6. </div>
  7. <div id="artnotes1" class="footnoteHolder"></div>
  8.  
其中:
article1 是你需要脚注的文章主体
<span class="footnote"> .. </span> 是注释内容,标签 span 和 class 均可配置。
artnotes1 是显示脚注的地方

按照默认的设置调用方式:
Javascript:
  1.  
  2. <script type="text/javascript">
  3.  
  4. var footnote = new footNotes();
  5. footnote.format('article1','artnotes1');
  6.  
  7. </script>
  8.  


  9. 如果你想自定义一些内容,可以用下面的方式:
    Javascript:
  1.  
  2. <script type="text/javascript">
  3.  
  4. var footnote = new footNotes();
  5. footnote.footNoteClassName = "footnote2";
  6. footnote.footNoteTagName = "em";
  7. footnote.footNoteBackLink = " [back «]";
  8. footnote.format('article1','artnotes1');
  9.  
  10. </script>

Tags:Js CSS 实现

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接