Página Inicial>Tutorial de web design>Tutorial CSS

Js e CSS realizam efeito de nota de rodapé

Autor：Eve Cole Data da Última Atualização：2009-06-12 17:46:02
As notas de rodapé são a melhor forma de fornecer mais informações aos usuários e também um complemento eficaz às informações principais. Elas são comumente encontradas em vários livros impressos. No entanto, como as notas de rodapé têm esses benefícios, é claro que também devemos aproveitá-las em páginas da web. Este artigo apresenta como obter efeitos de notas de rodapé usando Javascript e CSS.
JavaScript: 
  1.  
    2.  
  2. <tipo de script= "texto/javascript" >
    3.  
  3.  
    4.  
  4. // Descrição: Use Javascript e CSS para obter efeito de nota de rodapé
    5.  
  5. // Autor: CodeBit.cn ( http://www.CodeBit.cn )
    6.  
  6.  
    7.  
  7. var notas de rodapé = function ( ) { } ;
    8.  
  8.  
    9.  
  9. notas de rodapé .
    10.  
  10.  
    11.  
  11. footNoteClassName : "footnote" , // O className da nota de rodapé
    12.  
  12. footNoteTagName : "span" , // O nome da tag da nota de rodapé
    13.  
  13. footNoteBackLink : " [back]" , // Retorna ao link
    14.  
  14.  
    15.  
  15. formato: função ( contentID, footnoteID )
    16.  
  16. {
    17.  
  17. if ( ! document.getElementById ) retorna falso ;
    18.  
  18.  
    19.  
  19. var content= document.getElementById ( contentID ) ;
    20.  
  20. var footnote= document.getElementById ( footnoteID ) ;
    21.  
  21.  
    22.  
  22. var spans = content.getElementsByTagName ( this.footNoteTagName ) ;
    23.  
  23.  
    24.  
  24. var notaArr = [ ] ;
    25.  
  25. var nota = 0
    26.  
  26. ;
    27.  
  27.  
    28.  
  28. var len = spans comprimento
    29.  
  29. for ( i= 0 ; i<len; i++ )
    30.  
  30. {
    31.  
  31. nota ++;
    32.  
  32.  
    33.  
  33. if ( spans [ i ] .className == this.footNoteClassName )
    34.  
  34. {
    35.  
  35. // Obtenha o conteúdo da nota de rodapé
    36.  
  36. elContent = spans [ i ] innerHTML ;
    37.  
  37.  
    38.  
  38. noteArr.push ( elContent ) ;
    39.  
  39.  
    40.  
  40. // Cria um link para a nota de rodapé
    41.  
  41. var newEle = document . createElement ( "
    42.  
  42. a
    43.  
  43. " ) ;
    44.  
  44. newEle .
    45.  
  45. 'ftnlink_' +footnoteID+ '_' + note;
    46.  
  46. newEle. innerHTML = note;
    47.  
  47. // Limpa o conteúdo original
    48.  
  48. while ( spans [ i ] .childNodes .length )
    49.  
  49. {
    50.  
  50. spans [ i ] .removeChild ( spans [ i ] .firstChild ) ;
    51.  
  51. }
    52.  
  52. spans [ i ] .appendChild ( newEle
    53.  
  53. )
    54.  
  54. ;
    55.  
  55.  
    56.  
  56. //Cria uma lista de notas
    57.  
  57. var ul = this .__buildNoteList ( noteArr, footnoteID ) ;
    58.  
  58.  
    59.  
  59. nota de rodapé.appendChild ( ul ) ;
    60.  
  60.  
    61.  
  61. } ,
    62.  
  62.  
    63.  
  63. __buildNoteList: function ( notas, noteID )
    64.  
  64. {
    65.  
  65. if ( !notas || notas . comprimento
    66.  
  66. < 1 ) return ;
    67.  
  67.  
    68.  
  68. ul.className = this.footNoteClassName ;
    69.  
  69.  
    70.  
  70. varli ;
    71.  
  71.  
    72.  
  72. var len = notas comprimento + 1 ;
    73.  for ( i= 1 ; 
  73. i < len
    74.  
  74. ; i ++ )
    75.  
  75. {
    76.  
  76. li = document .
    77.  
  77.  
    78.  
  78. li.innerHTML = notas [ i -1 ] ;
    79.  
  79.  
    80.  
  80. // Cria um link [de retorno]
    81.  
  81. var link = document. createElement ( " a
    82.  
  82. " ) ;
    83.  
  83.  
    84.  
  84. link.innerHTML =este.footNoteBackLink ;
    85.  
  85.  
    86.  
  86. li.appendChild ( link ) ;
    87.  
  87.  
    88.  
  88. ul.appendChild ( li )
    89.  
  89. ;
    90.  
  90.  
    91.  
  91. retornarul ;
    92.  
  92. }
    93.  
  93. } ;
    94.  
  94.  
    95.  
  95. </script>
    96.  
  96.  
Para implementar notas de rodapé, precisamos dos seguintes elementos:
HTML: 
  1.  
    2.  
  2. <div id = "artigo1" >
    3.  
  3.  
    4.  
  4. CSS <span class = "footnote" > CSS é a abreviatura de Cascading Style Sheet. Traduzido como "Folhas de estilo em cascata". É uma linguagem de marcação usada para controle (aprimorado) sobre estilos de páginas da web e permite a separação das informações de estilo do conteúdo da página da web. </span>
    5.  
  5.  
    6.  
  6. </div>
    7.  
  7. <div id = "artnotes1" class = "footnoteHolder" > </div>
    8.  
  8.  
em:
artigo1 é o corpo principal do artigo para o qual você precisa de notas de rodapé
<span class="footnote"> .. </span> é o conteúdo da anotação e as tags span e class podem ser configuradas.
artnotes1 é onde as notas de rodapé são exibidas

De acordo com o método de chamada de configuração padrão:
JavaScript: 
  1.  
    2.  
  2. <tipo de script= "texto/javascript" >
    3.  
  3.  
    4.  
  4. var nota de rodapé = new footNotes ( ) ;
    5.  
  5. formato de nota de rodapé ( 'artigo1' , 'artnotes1' ) ;
    6.  
  6.  
    7.  
  7. </script>

    9.  


  9. Se quiser personalizar algum conteúdo, você pode usar os seguintes métodos:
     JavaScript:
  1.  
    2.  
  2. <tipo de script= "texto/javascript" >
    3.  
  3.  
    4.  
  4. var footnote = new footNotes ( ) ;
    5.  
  5. footNoteClassName = "
    6.  
  6. footnote2 "
    7.  
  7. ; footNoteTagName
    8.  
  8. = " em " ;
    9.  
  9.  
    10.  
  10. </script>
Artigos Relacionados