首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onSeptember 09, 2009

不过，既然脚注有这些好处，我们当然要在网页中也加以利用，本文向您介绍了用 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 和 CSS 实现脚注（Footnote）效果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
json 实例详细说明教程
Oct 31 Javascript
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
小程序自定义圆形进度条
Nov 17 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
html中两种获取标签内的值的方法
Jun 16 jQuery
Javascript 获取滚动条位置等信息的函数
Sep 08 #Javascript
实现png图片和png背景透明（支持多浏览器）的方法
Sep 08 #Javascript
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 #Javascript
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 #Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 #Javascript
Javascript String.replace的妙用
Sep 08 #Javascript
Javascript 检测、添加、移除样式(className)函数代码
Sep 08 #Javascript
HDR(1) 曝光融合(1) 有序排列(1) 公共键(1) shell脚本(1) kafka(2) key(1) pycryto(1) 连接器(1) 数据加密(1)
You might like
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
解决python写的windows服务不能启动的问题
2014/04/15 Python
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
Python 支付整合开发包的实现
2019/01/23 Python
python3操作注册表的方法（Url protocol）
2020/02/05 Python
Python绘制动态水球图过程详解
2020/06/03 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
党员政治学习材料
2014/05/14 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
乔布斯辞职信（中英文对照）
2015/05/12 职场文书