首页
所有分类
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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
jquery+html5时钟特效代码分享（可设置闹钟并且语音提醒）
Mar 30 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
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
Apache(17) capture(1) Navigator(1) uniapp(4) Flutter(2) 数据重复(1) tabBar(1) self(1) element-china-area-data(1) Hudi(1)
You might like
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
python如何在循环引用中管理内存
2018/03/20 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
Python实现微信机器人的方法
2019/09/06 Python
python函数不定长参数使用方法解析
2019/12/14 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
加拿大在线隐形眼镜专家：PerfectLens.ca
2016/11/19 全球购物
美国高级音响品牌：Master＆Dynamic
2018/07/05 全球购物
Steiff台湾官网：德国金耳釦泰迪熊
2019/12/26 全球购物
电脑专业个人求职信范文
2014/02/04 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
小学生安全责任书
2014/07/25 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
再见，2019我们不负使命；你好，2020我们砥砺前行
2020/01/03 职场文书
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python