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

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

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!