用Javascript 和 CSS 实现脚注(Footnote)效果_javascript技巧

不过,既然脚注有这些好处,我们当然要在网页中也加以利用,本文向您介绍了用 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>

时间: 2016-09-09

用Javascript 和 CSS 实现脚注(Footnote)效果_javascript技巧的相关文章

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

脚注(Footnote)是向用户提供更多信息的一个最佳途径,也是主体信息的一个有效补充,常见于各种印刷书籍中.不过,既然脚注有这些好处,我们当然要在网页中也加以利用,本文向您介绍了用Javascript和CSS实现脚注效果的方法. Javascript: <script type="text/javascript"> // 说明:用 Javascript 和 CSS 实现脚注(Footnote)效果 // 作者:CodeBit.cn ( http://www.CodeBit

JavaScript模拟实现键盘打字效果_javascript技巧

$(function () { var input_type = { init:function ($obj) { this.name = $obj.html().split("") this.length = this.name.length; this.i = 0; }, pri:function () { var $this = this //在此处只能使用闭包,因为windown.settimeout使函数的this指向object windown,而非原型链的this对象.而

用javascript实现的仿Flash广告图片轮换效果_javascript技巧

<!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-

JavaScript实现的经典文件树菜单效果_javascript技巧

本文实例讲述了JavaScript实现的经典文件树菜单效果.分享给大家供大家参考.具体如下: 这是一款简单的JavaScript文件树菜单,经典的树形菜单,特别是文件夹的样式比较经典,折叠和展开也很流畅自然,不过本款菜单有一个缺点,就是菜单的数据写在JS的数组里,这样一来多多少少对菜单内容的修改造成一定麻烦. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-file-tree-style-menu-codes/ 具体代码如下: <!DO

用js实现的抽象CSS圆角效果!!_javascript技巧

大概是去年的时候吧,就在网上见过了现成的CSS圆角效果的CSS及HTML代码,例如: <html> <head> <title>css圆角效果</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <style type="text/css"> div.RoundedCorne

javascript实现的listview效果_javascript技巧

<style type="text/css">    #oContainer {          width: 600px;          height: 500px;          border: 1px solid menu;          margin: 0px;          padding: 0px;          overflow: hidden;    }    a {          color: black;          te

JavaScript实现简单的日历效果_javascript技巧

只是个简单的日历模板,各位可根据需要自行添加需要的功能.该模板更多的是提供了关于年.月.日.月初.月末.星期的获取函数.各位可根据需要自行获取.欢迎提供更简便的方式方法,互相学习提高!谢谢~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>日历</title> <style type="

Javascript 鼠标移动上去小三角形滑块缓慢跟随效果_javascript技巧

先来一张截图.  鼠标移动到对应的分类,下面的红色小三角形就会自动跟随,缓慢的跟随. 不管有多少个都可以. javascript code: 复制代码 代码如下: function changeCoord(id, left) { $$(id).style.left = left; } function $$(id) { return document.getElementById(id); } function $$$(id) { return document.getElementsByCla

基于JS分页控件实现简单美观仿淘宝分页按钮效果_javascript技巧

最新版本代码请移步到https://github.com/pgkk/kkpager 在线测试链接:http://pgkk.github.io/kkpager/example/pager_test.html 分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager JS代码: Js代码 var kkpager = {

js仿支付宝多方框输入支付密码效果_javascript技巧

上次看到别人说写一个类似支付宝支付密码的输入框效果,今天就想自己写了试试看,大体功能是实现了. 已实现部分: 1. 焦点会随着输入数值往后推移 2. 如果输入的非0-9,则会出现提示 3. 按Backspance回车可以对应格子焦点往前推移 4. 按回车或者点击按钮可以触发按钮点击事件,获得输入值 未完善部分: 1. 在控制输入类型的时候,只有0-9.非0-9以及回车.回删几个键盘事件的区分,不够完善 2. 输入框用的input标签,password类型,会将输入值变成圆点,但是圆点太小不够美观