当前位置: 网站建设 > 网页设计 > 建站经验 >

Js和CSS实现脚注(Footnote)效果

时间:2013-03-02 03:49来源:未知 作者:admin 点击:

标签:Js和CSS实现脚注(Footnote)效果 实现(100)Footnote(1)脚注(1)效果(56)artnotes(1)CSS(655)
artnotes1是显示脚注的处所 Tag:效果 实现 Javascript: article1是你须要脚注的文章主体 script type=text/javascript // 阐明:用 Javascript 跟 CSS 实现脚注(Footnote)后果 // 作者:CodeBit.cn ( ) var footNotes = function(){}; footNotes.prototyp
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 &laquo;]";
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)效果相关文章
上一篇:JS代码优化技巧之通俗版(减少js体积) 下一篇:JS封装的CSS圆角框组件 V1.0
回到顶部