用Javascript +CSS实现脚注(Footnote)效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="注释, css, Javascript, footnote, 脚注, " /> <meta name="description" content="脚注（Footnote）是向用户提供更多信息的一个最佳途径，也是主体信息的一个有效补充，常见于各种印刷书籍中。不过，既然脚注有这些好处，我们当然要在网页中也加以利用，本文向您介绍了用 Javascript 和 CSS 实现脚注效果的方法。" /> <meta name="author" content="Yanfu Xie [xieyanfu@yahoo.com.cn]" /> <title>用 Javascript 和 CSS 实现脚注（Footnote）效果 - 注释, css, Javascript, footnote, 脚注, </title> </head> <body> <br /> <div id="example"> <h3 id="example_title">用 Javascript 和 CSS 实现脚注（Footnote）效果</h3> <div id="example_main"> <!--************************************* 实例代码开始 *************************************--> <style type="text/css"> 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> <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> <div id="wrapper"> <div id="content"> <div id="article1"> <h2>Article 1</h2> <p>在编程的过程中，我们通常都会积累很多简单、有效并且可重用的小段代码，一个简单的字符串处理函数<span class="footnote">函数是将唯一的输出值赋予每一输入的『法则』(Wikipedia)。</span>或者一个验证邮件地址的正则表达式<span class="footnote">正则表达式(Regular Expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。</span>，又或者一个简单的文件上传类，甚至一个效果不错的CSS<span class="footnote">CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 </span>导航样式。这些小技巧为我们节省了不少时间，但是时间一长，代码数量越来越多，寻找起来也耗费了不少时间。因此，本站致力于收集整理一些类似的小知识，并且努力提高文章搜索质量，一来方便大家查阅，二来也算是支持一下开源事业。 </p> <p>本站收集的代码和教程中，有从世界著名开源软件中摘取的函数、类<span class="footnote">类是对某个对象的定义。它包含有关对象动作方式的信息，包括它的名称、方法、属性和事件。</span>，也有网友提交的原创或翻译的精彩文章。本站的收录代码的标准是：简单、精彩、通用。 </p> </div> <div id="artnotes1" class="footnoteHolder"></div> <div id="article2"> <h2>Article 2</h2> <p>在编程的过程中，我们通常都会积累很多简单、有效并且可重用的小段代码，一个简单的字符串处理函数<em class="footnote2">函数是将唯一的输出值赋予每一输入的『法则』(Wikipedia)。</em>或者一个验证邮件地址的正则表达式<em class="footnote2">正则表达式(Regular Expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。</em>，又或者一个简单的文件上传类，甚至一个效果不错的CSS<em class="footnote2">CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 </em>导航样式。这些小技巧为我们节省了不少时间，但是时间一长，代码数量越来越多，寻找起来也耗费了不少时间。因此，本站致力于收集整理一些类似的小知识，并且努力提高文章搜索质量，一来方便大家查阅，二来也算是支持一下开源事业。 </p> <p>本站收集的代码和教程中，有从世界著名开源软件中摘取的函数、类<em class="footnote2">类是对某个对象的定义。它包含有关对象动作方式的信息，包括它的名称、方法、属性和事件。</em>，也有网友提交的原创或翻译的精彩文章。本站的收录代码的标准是：简单、精彩、通用。 </p> </div> <div id="artnotes2" class="footnoteHolder"></div> </div> <script type="text/javascript"> //<![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> </div> <br /> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
