자바스크립트 DOM 코드 응용 프로그램 간단한 사진 앨범 [firefox 전용]_이미지 특수 효과

하지만 이것만으로는 충분하지 않다고 생각합니다. 결국 모든 것은 다른 사람들에 의해 패키지화됩니다. 실용적이려면 네이티브 자바스크립트를 깊이 배워야 합니다. 오늘 js dom 프로그래밍을 기반으로 한 사진 앨범의 예를 소개하는 좋은 블로그 게시물을 봤습니다. 이 예는 작지만 개인적으로 학습 가치가 크다고 생각하므로 먼저 html과 렌더링을 제공하겠습니다. 나중에 js로 이해하세요.
 

코드 복사 코드는 다음과 같습니다.

스냅샷

;a href ="photo/fireworks.jpg" title="자바스크립트 DOM 코드 응용 프로그램 간단한 사진 앨범 [firefox 전용]_이미지 특수 효과">
;


• 
  "사진/썸네일_coffee.jpg" alt="커피" />
  






• 
  
  
  

>

여기서 a 요소의 href 속성 값은 큰 이미지를 표시하는 경로이고, img는 이에 해당하는 작은 이미지입니다. 아래의 작은 그림을 클릭하면 해당하는 큰 그림이 위에 표시됩니다.
js 구현은 아래와 같습니다.




코드 복사

코드는 다음과 같습니다.

먼저 preparePlaceholder 함수를 살펴보겠습니다. 이 함수에서는 img 요소 자리 표시자가 생성되고 해당 속성(id, src, alt)도 설정되고 p 요소가 삽입됩니다. appendChild 메소드를 사용하여 사진에 대한 설명을 제공하는 텍스트 노드를 생성하고 처음에는 "이미지를 선택"한 다음 document.getElementById를 통해 ul을 찾고 생성된 img 및 p를 그림 목록 앞에 삽입합니다. insertBefore 사용법을 설명하려면 Mozilla 개발자 센터를 확인하세요.

var insertElement = parentElement.insertBefore(newElement, referenceElement);

insertedElement는 반환 결과 실제로는 newElement입니다

parentElement는 삽입할 상위 요소, 즉

에 삽입되는 요소입니다.

newElement는 당연히 삽입될 새 요소입니다

referenceElement는

가 삽입되어야 하는 요소를 나타냅니다.

그런 다음 prepareGallery 함수를 살펴보겠습니다. 해당 기능은 각 a 요소에 클릭 이벤트를 할당하는 것입니다. return showPic(this)은 a 요소를 클릭한 후 기본 동작을 방지하기 위해 기본적으로 false를 반환합니다. 페이지에 새로운 사진이 표시됨)

다음은 해당 작은 그림을 감싸는 a 요소에서 href 및 title 속성 값을 가져오는 핵심 showPic 함수입니다(href 값은 작은 그림에 해당하는 큰 그림의 경로입니다. ), preparePlaceholder 함수에서 생성된 img를 준비하여 src 속성과 설명 텍스트를 p에 설정하여 최종 효과를 만듭니다. 여기에 nodeType이 있고 자세한 내용은 Mozilla 개발자 센터에서도 확인할 수 있습니다.

마지막으로 addLoadEvent라는 매우 흥미로운 함수가 있습니다. 매우 흥미롭습니다... 이벤트 함수가 대기열처럼 추가된 다음 순차적으로 실행됩니다.

하하, 이번 사진 앨범 분석은 여기까지입니다. 잘못된 점이나 개선이 필요한 부분이 있으면 겸허하게 지적해 주시면 감사하겠습니다. 너.
코드 패키지 다운로드