jquery画像にマウスを置くとテキストが反転します-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-05-08 20:08:06

オリジナル

567 人が閲覧しました

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

1. 実装原理

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

2. 実装手順

1. HTML 構造の作成

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

<div class="pic-box">
  <img src="图片地址" 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="图片地址" 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);
})

ログイン後にコピー

効果は次のとおりです。画像内:

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