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

脚注（Footnote）是向用户提供更多信息的一个最佳途径，也是主体信息的一个有效补充，常见于各种印刷书籍中。不过，既然脚注有这些好处，我们当然要在网页中也加以利用，本文向您介绍了用 Javascript 和 CSS 实现脚注效果的方法。

<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="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 是显示脚注的地方

按照默认的设置调用方式：
Javascript:

<script type="text/javascript">
var footnote = new footNotes();
footnote.format('article1','artnotes1');
</script>

如果你想自定义一些内容，可以用下面的方式： Javascript:

<script type="text/javascript">
var footnote = new footNotes();
footnote.footNoteClassName = "footnote2";
footnote.footNoteTagName = "em";
footnote.footNoteBackLink = " [back «]";
footnote.format('article1','artnotes1');
</script>

用 Javascript 和 CSS 实现脚注（Footnote）效果相关推荐

html5 数字滚动选择器,Odometer使用JavaScript和CSS制作数字滑动效果
Odometer是一个使用JavaScript和CSS技术,制作出数字上下滑动的动画效果插件,有点类似与我们的天然气的读数的动画效果,这个插件是轻量级的,压缩版本只有3kg,使用CSS3动画技术,所以 ...
css a hover禁止,我可以通过JavaScript禁用CSS：hover效果吗？
我试图阻止浏览器:hover通过JavaScript 使用CSS 的效果. 我在CSS中设置了a和a:hover样式,因为如果JS不可用,我希望获得悬浮效果.但是,如果有可用的JS ,我想用更平滑的效 ...
WebPart(SharePoint)中如何使用自定义的Javascript和css样式
由于SharePoint WebPart 不像asp.net,可以拖拽控件,而且没有前台代码.你只能发布倒sharepoint上进行浏览.由于没有前台的HTML,只有后台的cs文件.所以不能通过通常的 ...
手机开发必备技巧：javascript及CSS功能代码分享
1. viewport: 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域, 这是真正有效的区域.由于移动设备屏幕宽度不 ...
不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
网站前端性能优化之javascript和css
之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶 ...
javascript实现汉诺塔动画效果
javascript实现汉诺塔动画效果当初以为不用html5也很简单,踩了javascript单线程的大坑后终于做出来了,没事可以研究下,对理解javascript的执行过程还是很有帮助的,代码很烂 ...
css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码，本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
原生Javascript 操作 css类名 - 踩坑篇
文章目录原生Javascript 操作 css类名效果图示下: 案例 · 代码如下: 重要代码提示: 其他无关参考: 官方参考: 原生Javascript 操作 css类名不建议用 .class ...

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

用 Javascript 和 CSS 实现脚注（Footnote）效果相关推荐

最新文章

热门文章