管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　不过，既然脚注有这些好处，我们当然要在网页中也加以利用，本文向您介绍了用 Javascript 和 CSS 实现脚注效果的方法。

　　

复制代码 代码如下:

　　<script type="text/javascript">

　　// 说明：用 Javascript 和 CSS 实现脚注（Footnote）效果

　　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="article1">

　　CSS <span class="footnote">CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</span>

　　</div>

　　<div id="artnotes1" class="footnoteHolder"></div>

　　其中：

　　article1 是你需要脚注的文章主体

　　<span class="footnote"> .. </span> 是注释内容，标签 span 和 class 均可配置。

　　artnotes1 是显示脚注的地方

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

　　

复制代码 代码如下:

　　<script type="text/javascript">

　　var footnote = new footNotes();

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

　　</script>

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

　　

复制代码 代码如下:

　　<script type="text/javascript">

　　var footnote = new footNotes();

　　footnote.footNoteClassName = "footnote2";

　　footnote.footNoteTagName = "em";

　　footnote.footNoteBackLink = " [back «]";

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

　　</script>

　　测试代码：将下面的代码保存运行。

　　

复制代码 代码如下:

　　<!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=gb2312" />

　　<meta name="keywords" content="注释, css, Javascript, footnote, 脚注, " />

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

　　<title>用 Javascript 和 CSS 实现脚注（Footnote）效果 - 注释, css, Javascript, footnote, 脚注, </title>

　　</head>

　　<body>

　　<div class="ad">

　　</div>

　　<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 id="back"><a href="/pub/html/javascript/tip/footnotes_with_javascript_and_css/">返回 『用 Javascript 和 CSS 实现脚注（Footnote）效果』</a></div>

　　</div>

　　<br />

　　<div class="ad">

　　</div>

　　</body>

　　</html>

教程首页 更多教程