用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>

Tags:Javascript CSS 脚注 Footnote 特效

上一篇：含标题、文字摘要介绍的图片展示效果
下一篇：精美滑动式折叠菜单(Slashdots Menu)

·CSS教程 CSS的At-Rules@规则	07-15
·CSS教程 CSS网页布局Page Layout	07-15
·仿windows选项卡效果拾零	07-15
·CSS教程 CSS的display属性	07-14
·CSS教程 CSS的Background Images 背景图片	07-14
·符合Firefox的,以图片代替滚动条效果	07-14
·CSS教程 CSS的属性缩写	07-12
·CSS教程 CSS的Pseudo Classes 伪类	07-12

热门浏览

·快速实用的人物磨皮及美白方法	05-31
·用Photoshop简单打造毛笔字效果	03-15
·扩展你的思维--影子的创意	03-19
·Photoshop制作一颗中国水晶心	04-21
·国外优秀场景CG设计欣赏	03-21
·实例详细讲解ASP生成静态页面方	03-15
·汶川地震报道超强震撼版式	05-19
·新加坡设计师Charlene Chua作品	03-17
·PS制作彩色流线字效果	03-19
·很朦胧很震撼的人体摄影	03-15
·Photoshop把美女照片制作成拼图	04-19
·世界媒体密集报道中国地震灾情	05-20
·贵妇人挑逗你的欲望极限！（一	03-21
·仿阿里妈妈首页图片轮换广告代	03-19

编辑推荐

·凌乱中的完美韵律 Barral Fabi	07-14
·关于DNS服务器的配置问题	07-11
·雅虎站点管理器如何提升网站流	07-10
·不走寻常路的日历设计（二）	07-09
·高质量的页面摘要（Snippet）赏	07-09
·四大站长论道个人网站的发展	06-30
·社交网络(SNS)：内容、通讯、关	06-27
·Redoffice.cn的域名保卫战	06-26
·搜索引擎统一Robots文件标准	06-24
·08欧洲设计奖-企业标识类	06-23
·T-shirt:以艺术为名	06-21
·功夫熊猫预热，桌面全集抢先下	06-20
·一个实用的小图弹大图的js图片	06-20
·百度“观察盒”原理分析	06-20