텍스트를 반전하려면 이미지 위에 jquery 마우스를 놓으십시오.

웹페이지의 발달과 함께 동적인 효과는 디자인의 중요한 부분이 되었으며, 이러한 효과 중 이미지와 텍스트가 번갈아 나타나는 효과는 특히 흔합니다. 이 기사에서는 마우스 오버 이미지의 텍스트를 반전시키는 jQuery 기반 구현 방법을 소개합니다.

1. 구현 원리

그림과 텍스트를 동일한 요소 컨테이너에 배치하고 CSS 스타일을 제어하여 그림과 텍스트를 번갈아 표시합니다. 마우스를 가리키면 jqury를 사용하여 컨테이너의 이미지와 텍스트를 반전시키고 CSS 스타일을 수정하여 동적 효과를 얻습니다.

2. 구현 단계

1. HTML 구조 만들기

먼저 코드는 다음과 같습니다.

<div class="pic-box">
  <img src="图片地址" alt="">
  <div class="text">文字内容</div>
</div>

2. 컨테이너 스타일을 상대 위치로 설정합니다. 그림을 설정하고 텍스트 스타일은 절대 위치에 지정되며 표시 우선순위는 z-index 속성을 통해 제어됩니다. 코드는 다음과 같습니다.

.pic-box {
  position: relative;
}
.pic-box img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.pic-box .text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: .3s ease;
}

3. 반전 효과를 얻으려면

마우스를 컨테이너 위에 놓으면 그림과 텍스트가 반전되어 그림의 투명도가 낮아지고 텍스트의 투명도가 높아집니다. jQuery를 통해 이 효과를 달성하기 위한 코드는 다음과 같습니다.

$(".pic-box").hover(function () {
  $(this).find("img").stop().fadeOut(300);
  $(this).find(".text").stop().animate({"opacity": 1}, 300);
}, function () {
  $(this).find("img").stop().fadeIn(300);
  $(this).find(".text").stop().animate({"opacity": 0}, 300);
})

4. 최종 효과

완전한 코드는 다음과 같습니다.

<div class="pic-box">
  <img src="图片地址" alt="">
  <div class="text">文字内容</div>
</div>

.pic-box {
  position: relative;
}
.pic-box img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.pic-box .text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: .3s ease;
}

$(".pic-box").hover(function () {
  $(this).find("img").stop().fadeOut(300);
  $(this).find(".text").stop().animate({"opacity": 1}, 300);
}, function () {
  $(this).find("img").stop().fadeIn(300);
  $(this).find(".text").stop().animate({"opacity": 0}, 300);
})

효과는 그림과 같습니다.

3. 요약

본 글에서는 jQuery 기반의 이미지 위에 마우스가 지나갈 때 텍스트가 반전되는 방식을 소개합니다. CSS 스타일 제어와 jQuery 동적 조정을 통해 동적 효과를 얻을 수 있습니다. 그림과 텍스트를 결합하는 일반적인 구현 방식으로, 다양한 웹 디자인에 적용할 수 있습니다.

위 내용은 텍스트를 반전하려면 이미지 위에 jquery 마우스를 놓으십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!