Más
Descarga de código fuente Programación relacionada Recursos para crear sitios web Libros y tutoriales Juegos móviles Software móvil Artículo
Inicio>Tutorial de diseño web>Tutorial CSS

Js y CSS logran el efecto de nota al pie

Autor：Eve Cole Fecha de actualización：2009-06-12 17:46:02
Las notas a pie de página son la mejor manera de proporcionar a los usuarios más información y también son un complemento eficaz de la información principal. Se encuentran habitualmente en varios libros impresos. Sin embargo, dado que las notas al pie tienen estos beneficios, por supuesto también debemos aprovecharlas en las páginas web. Este artículo le presenta cómo lograr efectos de notas al pie usando Javascript y CSS.
JavaScript: 
  1.  
    2.  
  2. "texto/javascript" >
    3.  
  3.  
    4.  
  4. // Descripción: utilice Javascript y CSS para lograr el efecto de nota al pie
    5.  
  5. // Autor: CodeBit.cn (http://www.CodeBit.cn)
    6.  
  6.  
    7.  
  7. var notas al pie = función ( ) { } ;
    8.  
  8.  
    9.  
  9. Notas al pie. prototipo = {
    10.  
  10.  
    11.  
  11. footNoteClassName: "footnote" , // El nombre de clase de la nota al pie
    12.  
  12. footNoteTagName: "span" , // El nombre de etiqueta de la nota al pie
    13.  
  13. footNoteBackLink: "[volver]" , // Volver al enlace
    14.  
  14.  
    15.  
  15. formato: función ( ID de contenido, ID de nota al pie )
    16.  
  16. {
    17.  
  17. if ( ! document.getElementById ) devuelve falso ;
    18.  
  18.  
    19.  
  19. var contenido = document.getElementById ( ID de contenido ) ;
    20.  
  20. var nota al pie = document.getElementById ( ID de nota al pie ) ;
    21.  
  21.  
    22.  
  22. var abarca = contenido. getElementsByTagName ( this.footNoteTagName ) ;
    23.  
  23.  
    24.  
  24. var notaArr = [ ] ;
    25.  
  25. var nota = 0 ;
    26.  
  26. var elContenido;
    27.  
  27.  
    28.  
  28. var len = abarca longitud ;
    29.  
  29. para ( i= 0 ; i)
    30.  
  30. {
    31.  
  31. nota ++;
    32.  
  32.  
    33.  
  33. if ( spans [ i ] .className == this.footNoteClassName )
    34.  
  34. {
    35.  
  35. // Obtener el contenido de la nota al pie
    36.  
  36. elContent = spans [ i ] InnerHTML ;
    37.  
  37.  
    38.  
  38. noteArr.push ( elContent ) ;
    39.  
  39.  
    40.  
  40. // Crea un enlace a la nota al pie
    41.  
  41. var newEle = document. createElement ( "a" ) ;
    42.  
  42. newEle .
    43.  
  43. href
    44.  
  44. = '#ftn_' + footnoteID + '_' + note;
    45.  
  45. 'ftnlink_' +footnoteID+ '_' + note;
    46.  
  46. newEle. internalHTML =
    47.  
  47. note
    48.  
  48. ; // Borrar el contenido original while
    49.  
  49. (
    50.  
  50. spans [ i ] . firstChild ) ;
    51.  
  51. }
    52.  
  52. abarca [ i ] appendChild ( newEle
    53.  
  53. )
    54.  
  54. ;
    55.  
  55.  
    56.  
  56. //Crear una lista de notas
    57.  
  57. var ul = this .__buildNoteList ( noteArr, footnoteID ) ;
    58.  
  58.  
    59.  
  59. nota al pie.appendChild ( ul ) ;
    60.  
  60.  
    61.  
  61. } ,
    62.  
  62.  
    63.  
  63. __buildNoteList: función ( notas, ID de nota )
    64.  
  64. {
    65.  
  65. si ( !notas || notas. longitud < 1 ) retorno
    66.  
  66. var ul = crearElemento ( 'ul' ) ;
    67.  
  67.  
    68.  
  68. ul.className = este .footNoteClassName ;
    69.  
  69.  
    70.  
  70. varli ;
    71.  
  71.  
    72.  
  72. var len = notas. longitud + 1 ;
    73.  
  73. para ( i= 1 ; i)
    74.  
  74. {
    75.  
  75. li = documento. createElement ( 'li' )
    76.  
  76. id = "ftn_" +noteID+ "_" +i;
    77.  
  77.  
    78.  
  78. li.html interno = notas [ i -1 ] ;
    79.  
  79.  
    80.  
  80. // Crear un enlace [de retorno]
    81.  
  81. var link = document. createElement ( "a" )
    82.  
  82. href = "#ftnlink_" + noteID + "_" + i;
    83.  
  83.  
    84.  
  84. enlace. HTML interno = esto . footNoteBackLink ;
    85.  
  85.  
    86.  
  86. li.appendChild ( enlace ) ;
    87.  
  87.  
    88.  
  88. ul.appendChild
    89.  
  89. ( li ) ;
    90.  
  90.  
    91.  
  91. devolver ul;
    92.  
  92. }
    93.  
  93. } ;
    94.  
  94.  
    95.  
    96.  
  96.  
Para implementar notas a pie de página necesitamos los siguientes elementos:
HTML: 
  1.  
    2.  
  2.  id = "artículo1" >
    3.  
  3.  
    4.  
  4. CSS  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. 
    5.  
  5.  
    6.
  • id = "artnotes1" class = "footnoteHolder" >
  •  
    • en:
    El artículo 1 es el cuerpo principal del artículo para el que necesita notas a pie de página.
    .. es el contenido de la anotación y se pueden configurar etiquetas de intervalo y de clase.
    artnotes1 es donde se muestran las notas al pie

    Según el método de llamada de configuración predeterminada:
    JavaScript: 
    1.  
      2.  
    2. "texto/javascript" >
      3.  
    3.  
      4.  
    4. var nota al pie = nuevas notas al pie ( ) ;
      5.  
    5. formato de nota al pie ( 'artículo1' , 'artnotes1' ) ;
      6.  
    6.  
      7.  

      9.  


    9. Si desea personalizar algún contenido, puede utilizar los siguientes métodos:
       JavaScript:
    1.  
      2.  
    2. "texto/javascript" >
      3.  
    3.  
      4.  
    4. var footnote = new footNotes ( ) ;
      5.  
    5. footNoteClassName = "footnote2" ;
      6.  
    6. footnoteTagName = "em" ;
      7.  
    7. footNoteBackLink = "[volver &
      8.  
    8. laquo ; ] " ;
      9.  
    9.  
      10.