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

 
 
<스크립트 유형= "텍스트/자바스크립트" >
 
 
 
// 설명: 각주 효과를 얻으려면 Javascript 및 CSS를 사용하십시오.
 
// 작성자: CodeBit.cn ( http://www.CodeBit.cn )
 
 
 
var footNotes = 함수 ( ) { } ;
 
 
 
footNotes. 프로토타입 = {
 
 
 
footNoteClassName : "footnote" , // 각주 클래스 이름
 
footNoteTagName : "span" , // 각주 태그 이름
 
footNoteBackLink : " [back]" , // 링크로 돌아가기
 
 
 
형식 : 함수 ( contentID, footnoteID )
 
{
 
if ( ! document.getElementById ) return false ;
 
 
 
var content = document.getElementById ( contentID )
 
var footnote = document.getElementById ( footnoteID )
 ; 
 
 
var 스팬 = content.getElementsByTagName ( this.footNoteTagName ) ;
 
 
 
var noteArr = [ ] ;
 
var note = 0
 
;
 
 
 
var len = 범위. 길이 ;
 
for ( i= 0 ; i<len; i++ )
 
{
 
참고 ++;
 
 
 
if ( spans [ i ] .className == this.footNoteClassName )
 
{
 
// 각주 내용 가져오기
 
elContent =spans [ i ] innerHTML ;
 
 
 
noteArr.push ( elContent ) ;
 
 
 
// 각주에 대한 링크 생성
 
var newEle = document.createElement ( "a" ) ;
 
newEle.href = '#ftn_' + '_' + note
 
;
 
newEle .
 
'ftnlink_' +footnoteID+ '_' + note
 
;
 
newEle.innerHTML
 
=
 
note ; // 원본 콘텐츠 지우기 while
 
( spans [ i ] .removeChild ) ;
 
}
 
범위 [ i ] .appendChild ( newEle )
 
}
 
;
 
 
 
//노트 목록 생성
 
var ul = this .__buildNoteList ( noteArr, footnoteID ) ;
 
 
 
footnote.appendChild ( ul ) ;
 
 
 
} ,
 
 
 
__buildNoteList : function ( Notes, noteID )
 
{
 
if ( !notes || Notes.length < 1 ) return
 
var ul = document.createElement ( 'ul' ) ;
 
 
 
ul.className = 이 .footNoteClassName ;
 
 
 
발리 ;
 
 
 
var len = Notes.length + 1 ;
 
for ( i= 1 ; i<len; i++ )
 
{
 
li = document.createElement ( 'li' ) ;
 
li.id = "ftn_" +noteID+ "_" +i;
 
 
 
li.innerHTML = 메모 [ i -1 ] ;
 
 
 
// [반환] 링크 생성
 
var link = document.createElement ( "a" )
 
link. href = "#ftnlink_" + "_" + i;
 
 
 
link.innerHTML = this .footNoteBackLink ;
 
 
 
li.appendChild ( 링크 ) ;
 
 
 
ul.appendChild ( li )
 
}
 
 
 
반환
 
}
 
} ;
 
 
 
</script>
 
 

 
 
<div id = "article1" >
 
 
 
CSS <span class = "footnote" > CSS는 Cascading Style Sheet의 약어입니다. "Cascading Style Sheets"로 번역되었습니다. 웹 페이지 스타일에 대한 (향상된) 제어에 사용되는 마크업 언어이며 웹 페이지 콘텐츠에서 스타일 정보를 분리할 수 있습니다. </span>
 
 
 
</div>
 
<div id = "artnotes1" 클래스 = "footnoteHolder" > </div>
 
 

 
 
<스크립트 유형= "텍스트/자바스크립트" >
 
 
 
var footnote = new footNotes ( ) ;
 
각주 형식 ( 'article1' , 'artnotes1' ) ;
 
 
 
</script>

 


일부 콘텐츠를 맞춤설정하려면 다음 방법을 사용할 수 있습니다.
 자바스크립트:

 
 
<스크립트 유형= "텍스트/자바스크립트" >
 
 
 
var footnote = new footNotes ( ) ;
 
footnote.footNoteTagName = "
 
em" ;
 
footNoteBackLink = " [back &
 
laquo ; ] " ;
 
 
 
</script>