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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用Javascript 和 CSS 实现脚注（Footnote）效果

Javascript: JS option location 页面跳转实现代码; ExtJS 简介让你知道extjs是什么; ExtJs 学习笔记 Hello World!; ExtJs 学习笔记基础篇 Ext组件的使用; ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport; 漂亮的脚本日历,和大家分享; JS Tween 颜色渐变; js 图片轮播(5张图片); 开发跨浏览器javascript常见注意事项; 通用JS事件写法实现代码; Js 订制自己的AlertBox(信息提示框); js 浮动层菜单收藏; JavaScript入门教程(10) 认识其他对象; JQuery 常用方法基础教程; jQuery 页面载入进度条实现代码; jQuery Ajax 全解析; CSS+Table图文混排中实现文本自适应图片宽度（超简单+跨所有浏览器）; Ext JS Grid在IE6 下宽度的问题解决方法; js window.event对象详尽解析; JavaScript 悬浮窗口实现代码

No. « ‹ 215 216 217 218 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 394 ::

收藏到网摘: n/a

Javascript 获取滚动条位置等信息的函数禁止JQuery中的load方法装载IE缓存中文件的方法

脚注（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>

Javascript 获取滚动条位置等信息的函数禁止JQuery中的load方法装载IE缓存中文件的方法

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

评论 (0) All