Startseite>Webdesign-Tutorial>CSS-Tutorial

Js und CSS realisieren den Fußnoteneffekt

Autor：Eve Cole Aktualisierungszeit：2009-06-12 17:46:02
Fußnoten sind die beste Möglichkeit, den Benutzern weitere Informationen zu liefern und stellen außerdem eine wirksame Ergänzung zu den Hauptinformationen dar. Sie sind häufig in verschiedenen gedruckten Büchern zu finden. Da Fußnoten diese Vorteile haben, müssen wir sie natürlich auch auf Webseiten nutzen. In diesem Artikel erfahren Sie, wie Sie mit Javascript und CSS Fußnoteneffekte erzielen.
Javascript: 
  1.  
    2.  
  2. <script type= "text/javascript" >
    3.  
  3.  
    4.  
  4. // Beschreibung: Verwenden Sie Javascript und CSS, um einen Fußnoteneffekt zu erzielen
    5.  
  5. // Autor: CodeBit.cn (http://www.CodeBit.cn)
    6.  
  6.  
    7.  
  7. var footNotes = function ( ) { } ;
    8.  
  8.  
    9.  
  9. footNotes.prototyp = {
    10.  
  10.  
    11.  
  11. footNoteClassName : "footnote" , // Der Klassenname der Fußnote.
    12.  
  12. footNoteTagName : "span" , // Der Tag-Name der Fußnote.
    13.  
  13. footNoteBackLink : " [back]" , // Zurück zum Link
    14.  
  14.  
    15.  
  15. Format: function ( contentID, footnoteID )
    16.  
  16. {
    17.  
  17. if ( ! document.getElementById ) return false ;
    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 noteArr = [ ] ;
    25.  
  25. var note = 0
    26.  
  26. ;
    27.  
  27.  
    28.  
  28. var len = spans. length ;
    29.  
  29. for ( i= 0 ; i<len; i++ )
    30.  
  30. {
    31.  
  31. note ++;
    32.  
  32.  
    33.  
  33. if ( spans [ i ] .className == this.footNoteClassName )
    34.  
  34. {
    35.  
  35. // Den Inhalt der Fußnote abrufen
    36.  
  36. elContent = spans [ i ] ;
    37.  
  37.  
    38.  
  38. noteArr.push ( elContent ) ;
    39.  
  39.  
    40.  
  40. // Einen Link zur Fußnote erstellen
    41.  
  41. var newEle ( "a" ) ;
    42.  
  42. href =
    43.  
  43. ' #ftn_' + footnoteID + '_' + note
    44.  
  44. ; 'ftnlink_' +footnoteID+ '_' + note;
    45.  
  45. newEle. innerHTML =
    46.  
  46. note
    47.  
  47. ; // Den ursprünglichen Inhalt löschen while
    48.  
  48. (
    49.  
  49. spans [ i ] . firstChild ) ;
    50.  
  50. }
    51.  
  51. spans [ i ] . appendChild ( newEle
    52.  
  52. )
    53.  
  53. ;
    54.  
  54.  
    55.  
  55. //Eine Notizliste erstellen
    56.  
  56. var ul = this .__buildNoteList ( noteArr, footnoteID ) ;
    57.  
  57.  
    58.  
  58. footnote.appendChild ( ul ) ;
    59.  
  59.  
    60.  
  60. } ,
    61.  
  61.  
    62.  
  62. __buildNoteList: function ( notes, noteID )
    63.  
  63. {
    64.  
  64. if ( !notes || NOTES. length < 1 ) return ;
    65.  
  65. var ul = document .
    66.  
  66.  
    67.  
  67. ul.className = this .footNoteClassName ;
    68.  
  68.  
    69.  
  69. Varli ;
    70.  
  70.  
    71.  
  71. var len = Länge + 1 ;
    72.  
  72. for ( i= 1 ; i<len; i++ )
    73.  
  73. {
    74.  
  74. li = createElement ( ' li
    75.  
  75. ' ) ;
    76.  
  76.  
    77.  
  77. li. innerHTML = Notizen [ i -1 ] ;
    78.  
  78.  
    79.  
  79. // Einen [
    80.  
  80. return]-Link erstellen
    81.  
  81. var link = document .
    82.  
  82.  
    83.  
  83. link. innerHTML = this . footNoteBackLink ;
    84.  
  84.  
    85.  
  85. li.appendChild ( Link ) ;
    86.  
  86.  
    87.  
  87. ul.appendChild
    88.  
  88. ( li ) ;
    89.  
  89.  
    90.  
  90. return ul;
    91.  
  91. }
    92.  
  92. } ;
    93.  
  93.  
    94.  
  94. </script>
    95.  
  95.  
Zur Implementierung von Fußnoten benötigen wir folgende Elemente:
HTML: 
  1.  
    2.  
  2. <div id = "article1" >
    3.  
  3.  
    4.  
  4. CSS <span class = "footnote" > CSS ist die Abkürzung für Cascading Style Sheet. Übersetzt als „Cascading Style Sheets“. Es handelt sich um eine Auszeichnungssprache, die zur (erweiterten) Kontrolle über Webseitenstile verwendet wird und die Trennung von Stilinformationen vom Webseiteninhalt ermöglicht. </span>
    5.  
  5.  
    6.  
  6. </div>
    7.  
  7. <div id = "artnotes1" class = "footnoteHolder" > </div>
    8.  
  8.  
In:
Artikel 1 ist der Hauptteil des Artikels, für den Sie Fußnoten benötigen
<span class="footnote"> .. </span> ist der Anmerkungsinhalt und es können sowohl span- als auch class-Tags konfiguriert werden.
In artnotes1 werden Fußnoten angezeigt

Gemäß der Standardeinstellung der Aufrufmethode:
Javascript: 
  1.  
    2.  
  2. <script type= "text/javascript" >
    3.  
  3.  
    4.  
  4. var footnote = new footNotes ( ) ;
    5.  
  5. Fußnotenformat ( 'article1' , 'artnotes1' ) ;
    6.  
  6.  
    7.  
  7. </script>

    9.  


  9. Wenn Sie einige Inhalte anpassen möchten, können Sie die folgenden Methoden verwenden:
     Javascript:
  1.  
    2.  
  2. <script type= "text/javascript" >
    3.  
  3.  
    4.  
  4. var footnote = new
    5.  
  5. footNotes (
    6.  
  6. ) ;
    7.  
  7. footnote =
    8.  
  8. " em " ;​
    9.  
  9.  
    10.  
  10. </script>
Ähnliche Artikel