jquery滑鼠經過圖片反轉文字

隨著網頁的發展，動態效果已成為設計的重要一環，而在這些效果中，圖片和文字交替出現的效果尤其常見。本文介紹一種基於jQuery的滑鼠懸停圖片反轉文字的實作方法。

一、實作原理

將圖片和文字放置在同一個元素容器中，透過控制CSS樣式實現圖片和文字的交替顯示。滑鼠懸停時，透過jqury實現容器中圖片和文字的反轉並修改CSS樣式，實現動態效果。

二、實作步驟

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的滑鼠經過圖片反轉文字的實作方法，透過控制CSS樣式和jQuery動態調整實現了動態效果。這是一種常見的圖片與文字結合的實現方式，可以運用到各種網頁設計中。

以上是jquery滑鼠經過圖片反轉文字的詳細內容。更多資訊請關注PHP中文網其他相關文章！