JavaScript를 사용하여 이미지의 위아래 슬라이딩 전환 효과를 얻고 페이드인 및 페이드아웃 애니메이션을 추가하는 방법은 무엇입니까?

JavaScript를 사용하여 이미지의 위아래 슬라이딩 전환 효과를 얻고 페이드인 및 페이드아웃 애니메이션을 추가하는 방법은 무엇입니까?

웹 개발에서는 이미지 전환 효과를 구현해야 하는 경우가 많습니다. JavaScript를 사용하여 위아래 슬라이딩 전환을 구현하고 페이드인 및 페이드아웃 애니메이션 효과를 추가할 수 있습니다.

먼저 여러 이미지를 포함하는 컨테이너가 필요합니다. HTML에서 div 태그를 사용하여 이미지를 호스팅할 수 있습니다. 예를 들어, 이미지를 보관하기 위해 ID가 "image-container"인 div를 만듭니다.

<div id="image-container">
   <img  src="/static/imghwm/default1.png"  data-src="image1.jpg"  class="lazy" alt="JavaScript를 사용하여 이미지의 위아래 슬라이딩 전환 효과를 얻고 페이드인 및 페이드아웃 애니메이션을 추가하는 방법은 무엇입니까?" >
   <img  src="/static/imghwm/default1.png"  data-src="image2.jpg"  class="lazy" alt="JavaScript를 사용하여 이미지의 위아래 슬라이딩 전환 효과를 얻고 페이드인 및 페이드아웃 애니메이션을 추가하는 방법은 무엇입니까?" >
   <img  src="/static/imghwm/default1.png"  data-src="image3.jpg"  class="lazy" alt="JavaScript를 사용하여 이미지의 위아래 슬라이딩 전환 효과를 얻고 페이드인 및 페이드아웃 애니메이션을 추가하는 방법은 무엇입니까?" >
</div>

다음으로 전환 효과를 얻으려면 JavaScript 코드를 작성해야 합니다. 여기서는 이벤트 리스너를 사용하여 마우스 스크롤 이벤트를 모니터링하고 스크롤 방향에 따라 이미지를 전환합니다.

var container = document.getElementById("image-container");
var images = container.getElementsByTagName("img");
var currentIndex = 0;
var imageHeight = images[currentIndex].height;

window.addEventListener("wheel", function(event){
   var deltaY = event.deltaY;
   
   // 滚轮向下滚动，切换至下一张图片
   if (deltaY > 0 && currentIndex < images.length - 1) {
      currentIndex++;
   }
   
   // 滚轮向上滚动，切换至上一张图片
   else if (deltaY < 0 && currentIndex > 0) {
      currentIndex--;
   }
   
   // 计算图片容器需要滚动的距离
   var scrollDistance = currentIndex * imageHeight;
   
   // 使用CSS的tranform属性实现滑动效果
   container.style.transform = "translateY(-" + scrollDistance + "px)";
   
   // 使用CSS的transition属性实现淡入淡出效果
   container.style.opacity = 0.5;
});

위 코드에서 deltaY表示滚轮滚动的距离，currentIndex表示当前显示的图片索引，imageHeight는 각 이미지의 높이를 나타냅니다. 휠 이벤트를 수신하면 휠의 롤링 방향과 현재 표시된 이미지 인덱스에 따라 전환 효과가 달성됩니다. 그런 다음 CSS 변환 속성을 사용하여 이미지 컨테이너를 해당 위치로 위아래로 슬라이드하고 전환 속성을 사용하여 투명도를 설정하여 페이드 인 및 페이드 아웃 애니메이션 효과를 얻습니다.

실제 사용 시 필요에 따라 관련 스타일을 조정하고 최적화할 수 있습니다.

위는 JavaScript를 사용하여 이미지의 위아래 슬라이딩 전환 효과를 구현하고 페이드인 및 페이드아웃 애니메이션을 추가하는 코드 예제입니다. 마우스 스크롤 이벤트를 청취함으로써 휠의 스크롤 방향에 따라 그림을 전환할 수 있고 CSS의 변형 속성을 사용하여 슬라이딩 효과를 얻고 전환 속성을 사용하여 페이드 인 및 페이드 아웃 효과를 얻을 수 있습니다. 따라서 사진 전환이 더 부드럽고 생생해집니다.

위 내용은 JavaScript를 사용하여 이미지의 위아래 슬라이딩 전환 효과를 얻고 페이드인 및 페이드아웃 애니메이션을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!