首页
所有分类
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 相关文章推荐
js用图作提交按钮或超连接
Mar 26 Javascript
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
vue.js表格分页示例
Oct 18 Javascript
获取select的value、text值的简单示例（jquery与javascript）
Dec 07 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
11个教程中不常被提及的JavaScript小技巧（推荐）
Apr 17 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 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
exec(1) Dijkstra(1) 迪杰斯特拉(1) MyBatis(5) Android Studio(4) nacos(1) 三角函数(1) cv2(1) Flask Web(1) seata(1)
You might like
yii2.0框架数据库操作简单示例【添加，修改，删除，查询，打印等】
2020/04/13 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
Python中的exec、eval使用实例
2014/09/23 Python
python实现堆栈与队列的方法
2015/01/15 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
python爬取百度贴吧前1000页内容（requests库面向对象思想实现）
2019/08/10 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
ASP.NET Core中的配置详解
2021/02/05 Python
python 实现IP子网计算
2021/02/18 Python
海蓝之谜(LA MER)澳大利亚官方商城：全球高端奢华护肤品牌
2017/10/27 全球购物
索尼巴西商店：Sony巴西
2019/06/21 全球购物
Made in Design德国：设计师家具、灯具和装饰
2019/10/31 全球购物
汇科协同Java笔试题
2012/03/31 面试题
怎样客观的做好自我评价
2013/12/28 职场文书
函授教育个人学习的自我评价
2013/12/31 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
2014年教师节寄语
2014/08/11 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
关于保护环境的建议书
2014/08/26 职场文书
经理助理岗位职责
2015/02/02 职场文书
银行自荐信范文
2015/03/25 职场文书
合同审查法律意见书
2015/06/04 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书