Js y CSS logran el efecto de nota al pie

 
 
<tipo de script= "texto/javascript" >
 
 
 
// Descripción: utilice Javascript y CSS para lograr el efecto de nota al pie
 
// Autor: CodeBit.cn (http://www.CodeBit.cn)
 
 
 
var notas al pie = función ( ) { } ;
 
 
 
Notas al pie. prototipo = {
 
 
 
footNoteClassName: "footnote" , // El nombre de clase de la nota al pie
 
footNoteTagName: "span" , // El nombre de etiqueta de la nota al pie
 
footNoteBackLink: "[volver]" , // Volver al enlace
 
 
 
formato: función ( ID de contenido, ID de nota al pie )
 
{
 
if ( ! document.getElementById ) devuelve falso ;
 
 
 
var contenido = document.getElementById ( ID de contenido ) ;
 
var nota al pie = document.getElementById ( ID de nota al pie ) ;
 
 
 
var abarca = contenido. getElementsByTagName ( this.footNoteTagName ) ;
 
 
 
var notaArr = [ ] ;
 
var nota = 0 ;
 
var elContenido;
 
 
 
var len = abarca longitud ;
 
para ( i= 0 ; i<len; i++ )
 
{
 
nota ++;
 
 
 
if ( spans [ i ] .className == this.footNoteClassName )
 
{
 
// Obtener el contenido de la nota al pie
 
elContent = spans [ i ] InnerHTML ;
 
 
 
noteArr.push ( elContent ) ;
 
 
 
// Crea un enlace a la nota al pie
 
var newEle = document. createElement ( "a" ) ;
 
newEle .
 
href
 
= '#ftn_' + footnoteID + '_' + note;
 
'ftnlink_' +footnoteID+ '_' + note;
 
newEle. internalHTML =
 
note
 
; // Borrar el contenido original while
 
(
 
spans [ i ] . firstChild ) ;
 
}
 
abarca [ i ] appendChild ( newEle
 
)
 
;
 
 
 
//Crear una lista de notas
 
var ul = this .__buildNoteList ( noteArr, footnoteID ) ;
 
 
 
nota al pie.appendChild ( ul ) ;
 
 
 
} ,
 
 
 
__buildNoteList: función ( notas, ID de nota )
 
{
 
si ( !notas || notas. longitud < 1 ) retorno
 
var ul = crearElemento ( 'ul' ) ;
 
 
 
ul.className = este .footNoteClassName ;
 
 
 
varli ;
 
 
 
var len = notas. longitud + 1 ;
 
para ( i= 1 ; i<len; i++ )
 
{
 
li = documento. createElement ( 'li' )
 
id = "ftn_" +noteID+ "_" +i;
 
 
 
li.html interno = notas [ i -1 ] ;
 
 
 
// Crear un enlace [de retorno]
 
var link = document. createElement ( "a" )
 
href = "#ftnlink_" + noteID + "_" + i;
 
 
 
enlace. HTML interno = esto . footNoteBackLink ;
 
 
 
li.appendChild ( enlace ) ;
 
 
 
ul.appendChild
 
( li ) ;
 
 
 
devolver ul;
 
}
 
} ;
 
 
 
</script>
 
 

 
 
<div id = "artículo1" >
 
 
 
CSS <span class = "footnote" > CSS es la abreviatura de Cascading Style Sheet. Traducido como "Hojas de estilo en cascada". Es un lenguaje de marcado utilizado para el control (mejorado) sobre los estilos de páginas web y permite la separación de la información de estilo del contenido de la página web. </span>
 
 
 
</div>
 
<div id = "artnotes1" class = "footnoteHolder" > </div>
 
 

 
 
<tipo de script= "texto/javascript" >
 
 
 
var nota al pie = nuevas notas al pie ( ) ;
 
formato de nota al pie ( 'artículo1' , 'artnotes1' ) ;
 
 
 
</script>

 


Si desea personalizar algún contenido, puede utilizar los siguientes métodos:
 JavaScript:

 
 
<tipo de script= "texto/javascript" >
 
 
 
var footnote = new footNotes ( ) ;
 
footNoteClassName = "footnote2" ;
 
footnoteTagName = "em" ;
 
footNoteBackLink = "[volver &
 
laquo ; ] " ;
 
 
 
</script>