jquery画像にマウスを置くとテキストが反転します

Web ページの発展に伴い、動的な効果がデザインの重要な部分になってきました。その中でも画像とテキストが交互に表示される効果は特に一般的です。この記事では、マウスオーバー画像上の文字を反転するjQueryベースの実装方法を紹介します。

1. 実装原理

画像とテキストを同じ要素コンテナに配置し、CSS スタイルを制御することで画像とテキストの交互表示を実現します。マウスがホバーしているときに、jqury を使用してコンテナー内の画像とテキストを反転し、CSS スタイルを変更して動的な効果を実現します。

2. 実装手順

1. HTML 構造の作成

最初に、画像とテキストを含む HTML コンテナを作成します。コードは次のとおりです:

<div class="pic-box">
  <img src="/static/imghw/default1.png"  data-src="图片地址"  class="lazy" alt="">
  <div class="text">文字内容</div>
</div>

2 、CSS スタイルの調整

コンテナ スタイルを相対位置に設定し、画像とテキスト スタイルを絶対位置に設定し、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="/static/imghw/default1.png"  data-src="图片地址"  class="lazy" 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 の動的調整を制御することで実現されます。画像と文字を組み合わせる一般的な実装方法で、さまざまなWebデザインに応用できます。

以上がjquery画像にマウスを置くとテキストが反転しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。