《
Js和CSS实现脚注(Footnote)效果》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302335V2013.htm
artnotes1是显示脚注的处所
Tag：效果 实现
Javascript:
article1是你须要脚注的文章主体
<script type="text/javascript">
// 阐明：用 Javascript 跟 CSS 实现脚注（Footnote）后果
// 作者：CodeBit.cn ( )
var footNotes = function(){};
footNotes.prototype = {
footNoteClassName : "footnote", // 脚注的 className
footNoteTagName : "span", // 脚注的标签名
footNoteBackLink : " [back]",JS代码优化技巧之通俗版(减少js体积);, // 返回链接
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 = [],JS+DIV表单实例――鼠标移上背景变色和文字提示;
var note = 0;
var elContent;
var len = spans.length;
for (i=0; i<len,Joomla建站教程 网站的性能优化与seo; 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,javascript正则表达式验证各种文本框输入格式;
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",JavaScript 中的replace方法;);
link.href = "#ftnlink_" + noteID + "_" + i;
link.innerHTML = this.footNoteBackLink;
li.appendChild( link );
ul.appendChild( li ),IPv6在中国的未来发展不容过分乐观;
}
return ul;
}
};
</script>
脚注（Footnote）是向用户供给更多信息的一个最佳道路，也是主体信息的一个有效弥补，常见于各种印刷书籍中。不外，既然脚注有这些利益，咱们当然要在网页中也加以应用，本文向你先容了用Javascript和CSS实现脚注效果的方式。
Javascript:
依照默认的设置调用方法：
<script type="text/javascript">
var footnote = new footNotes();
footnote.footNoteClassName = "footnote2";
footnote.footNoteTagName = "em";
footnote.footNoteBackLink = " [back «]";
footnote.format('article1','artnotes1');
</script>
假如你想自定义一些内容，能够用下面的方式：
Javascript:
<script type="text/javascript">
var footnote = new footNotes();
footnote.format('article1','artnotes1'),input标签写CSS时需要注意的几点;
</script>
--> [
网站建设之]Js和CSS实现脚注(Footnote)效果
要实现脚注，我们需要下列元素：
<spanclass="footnote">..</span>是正文内容，标签span和class均可配置。
HTML:
其中：
<div id="article1">,img图片元素下多余空白解决方案;
CSS <span class="footnote",IIS日志分析工具之EXCEL数据透视表;>CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(加强)把持网页样式并容许将款式信息与网页内容分别的一种标志性语言。</span>
</div>
<div id="artnotes1" class="footnoteHolder"></div>,iframe应用技巧 保留垂直滚动条去掉水平滚动条;
(责任编辑：网站建设)
Js和CSS实现脚注(Footnote)效果相关文章