더 보기
소스 다운로드 프로그래밍 관련 웹사이트 자원 서적 튜토리얼 모바일 게임 휴대폰 소프트웨어 문서
홈페이지>웹 디자인 튜토리얼>CSS 튜토리얼

Js와 CSS는 각주 효과를 실현합니다.

저자：Eve Cole 업데이트 시간：2009-06-12 17:46:02
각주는 사용자에게 더 많은 정보를 제공하는 가장 좋은 방법이며 주요 정보를 효과적으로 보충하는 역할도 합니다. 각주는 다양한 인쇄 서적에서 흔히 볼 수 있습니다. 그러나 각주에는 이러한 이점이 있으므로 웹 페이지에서도 이를 활용해야 합니다. 이 기사에서는 Javascript와 CSS를 사용하여 각주 효과를 얻는 방법을 소개합니다.
자바스크립트: 
  1.  
    2.  
  2. <스크립트 유형= "텍스트/자바스크립트" >
    3.  
  3.  
    4.  
  4. // 설명: 각주 효과를 얻으려면 Javascript 및 CSS를 사용하십시오.
    5.  
  5. // 작성자: CodeBit.cn ( http://www.CodeBit.cn )
    6.  
  6.  
    7.  
  7. var footNotes = 함수 ( ) { } ;
    8.  
  8.  
    9.  
  9. footNotes. 프로토타입 = {
    10.  
  10.  
    11.  
  11. footNoteClassName : "footnote" , // 각주 클래스 이름
    12.  
  12. footNoteTagName : "span" , // 각주 태그 이름
    13.  
  13. footNoteBackLink : " [back]" , // 링크로 돌아가기
    14.  
  14.  
    15.  
  15. 형식 : 함수 ( 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 스팬 = content.getElementsByTagName ( this.footNoteTagName ) ;
    23.  
  23.  
    24.  
  24. var noteArr = [ ] ;
    25.  
  25. var note = 0
    26.  
  26. ;
    27.  
  27.  
    28.  
  28. var len = 범위. 길이 ;
    29.  
  29. for ( i= 0 ; i)
    30.  
  30. {
    31.  
  31. 참고 ++;
    32.  
  32.  
    33.  
  33. if ( spans [ i ] .className == this.footNoteClassName )
    34.  
  34. {
    35.  
  35. // 각주 내용 가져오기
    36.  
  36. elContent =spans [ i ] innerHTML ;
    37.  
  37.  
    38.  
  38. noteArr.push ( elContent ) ;
    39.  
  39.  
    40.  
  40. // 각주에 대한 링크 생성
    41.  
  41. var newEle = document.createElement ( "a" ) ;
    42.  
  42. newEle.href = '#ftn_' + '_' + note
    43.  
  43. ;
    44.  
  44. newEle .
    45.  
  45. 'ftnlink_' +footnoteID+ '_' + note
    46.  
  46. ;
    47.  
  47. newEle.innerHTML
    48.  
  48. =
    49.  
  49. note ; // 원본 콘텐츠 지우기 while
    50.  
  50. ( spans [ i ] .removeChild ) ;
    51.  
  51. }
    52.  
  52. 범위 [ i ] .appendChild ( newEle )
    53.  
  53. }
    54.  
  54. ;
    55.  
  55.  
    56.  
  56. //노트 목록 생성
    57.  
  57. var ul = this .__buildNoteList ( noteArr, footnoteID ) ;
    58.  
  58.  
    59.  
  59. footnote.appendChild ( ul ) ;
    60.  
  60.  
    61.  
  61. } ,
    62.  
  62.  
    63.  
  63. __buildNoteList : function ( Notes, noteID )
    64.  
  64. {
    65.  
  65. if ( !notes || Notes.length < 1 ) return
    66.  
  66. var ul = document.createElement ( 'ul' ) ;
    67.  
  67.  
    68.  
  68. ul.className = 이 .footNoteClassName ;
    69.  
  69.  
    70.  
  70. 발리 ;
    71.  
  71.  
    72.  
  72. var len = Notes.length + 1 ;
    73.  
  73. for ( i= 1 ; i)
    74.  
  74. {
    75.  
  75. li = document.createElement ( 'li' ) ;
    76.  
  76. li.id = "ftn_" +noteID+ "_" +i;
    77.  
  77.  
    78.  
  78. li.innerHTML = 메모 [ i -1 ] ;
    79.  
  79.  
    80.  
  80. // [반환] 링크 생성
    81.  
  81. var link = document.createElement ( "a" )
    82.  
  82. link. href = "#ftnlink_" + "_" + i;
    83.  
  83.  
    84.  
  84. link.innerHTML = this .footNoteBackLink ;
    85.  
  85.  
    86.  
  86. li.appendChild ( 링크 ) ;
    87.  
  87.  
    88.  
  88. ul.appendChild ( li )
    89.  
  89. }
    90.  
  90.  
    91.  
  91. 반환
    92.  
  92. }
    93.  
  93. } ;
    94.  
  94.  
    95.  
    96.  
  96.  
각주를 구현하려면 다음 요소가 필요합니다.
HTML: 
  1.  
    2.  
  2.  id = "article1" >
    3.  
  3.  
    4.  
  4. CSS  class = "footnote" > CSS는 Cascading Style Sheet의 약어입니다. "Cascading Style Sheets"로 번역되었습니다. 웹 페이지 스타일에 대한 (향상된) 제어에 사용되는 마크업 언어이며 웹 페이지 콘텐츠에서 스타일 정보를 분리할 수 있습니다. 
    5.  
  5.  
    6.
  • id = "artnotes1" 클래스 = "footnoteHolder" >
  •  
    • 안에:
    Article1 은 각주가 필요한 기사의 본문입니다.
    .. 은 Annotation 내용으로, SPAN 태그와 클래스 태그를 모두 구성할 수 있습니다.
    artnotes1 은 각주가 표시되는 곳입니다.

    기본 설정 호출 방법에 따르면:
    자바스크립트: 
    1.  
      2.  
    2. <스크립트 유형= "텍스트/자바스크립트" >
      3.  
    3.  
      4.  
    4. var footnote = new footNotes ( ) ;
      5.  
    5. 각주 형식 ( 'article1' , 'artnotes1' ) ;
      6.  
    6.  
      7.  

      9.  


    9. 일부 콘텐츠를 맞춤설정하려면 다음 방법을 사용할 수 있습니다.
       자바스크립트:
    1.  
      2.  
    2. <스크립트 유형= "텍스트/자바스크립트" >
      3.  
    3.  
      4.  
    4. var footnote = new footNotes ( ) ;
      5.  
    5. footnote.footNoteTagName = "
      6.  
    6. em" ;
      7.  
    7. footNoteBackLink = " [back &
      8.  
    8. laquo ; ] " ;
      9.  
    9.  
      10.