jQuery 實現鼠標懸停縮圖顯示大圖效果

效果預覽

當用戶將鼠標移動到縮略圖上方時，頁面固定位置或跟隨鼠標顯示對應的大圖預覽，移出後自動隱藏。這是電商、圖庫常見的交互增強手段。

核心實現邏輯

1. 監聽縮略圖容器的 mouseenter/mouseleave 或 hover 事件。
2. 動態創建或顯示一個絕對定位的預覽層（<div class="preview">）。
3. 根據事件對象 pageX/pageY 計算預覽層位置，防止超出視窗邊界。
4. 將當前縮略圖對應的大圖 src 設置給預覽層內的 <img> 標籤。

完整代碼示例

HTML 結構

<table id="thumbList">
  <tr>
    <td data-large="img/large1.jpg"><img src="img/thumb1.jpg" alt="產品1"></td>
    <td data-large="img/large2.jpg"><img src="img/thumb2.jpg" alt="產品2"></td>
    <td data-large="img/large3.jpg"><img src="img/thumb3.jpg" alt="產品3"></td>
  </tr>
</table>
<div id="previewBox" class="preview"><img src="" alt="大圖預覽"></div>

CSS 樣式

.preview {
  position: fixed;
  display: none;
  z-index: 9999;
  border: 2px solid #ffd700;
  background: #fff;
  padding: 4px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.preview img { max-width: 300px; max-height: 200px; display: block; }

jQuery 邏輯

$(function() {
  const $preview = $('#previewBox');
  const $previewImg = $preview.find('img');
  const offsetX = 15, offsetY = 15; // 鼠標偏移量

  $('#thumbList td').hover(
    function(e) {
      const largeSrc = $(this).data('large');
      if (!largeSrc) return;
      $previewImg.attr('src', largeSrc);
      $preview.show();
      updatePosition(e);
    },
    function() { $preview.hide(); }
  );

  $(document).on('mousemove', function(e) {
    if ($preview.is(':visible')) updatePosition(e);
  });

  function updatePosition(e) {
    let left = e.pageX + offsetX;
    let top  = e.pageY + offsetY;
    const pw = $preview.outerWidth(), ph = $preview.outerHeight();
    const vw = $(window).width(), vh = $(window).height();

    if (left + pw > vw) left = e.pageX - pw - offsetX;
    if (top + ph > vh) top = e.pageY - ph - offsetY;
    $preview.css({ left, top });
  }
});

優化建議

• 圖片預加載：頁面載入時預先加載大圖，避免首次懸停延遲。
• 節流處理：mousemove 事件觸發頻率高，可用 requestAnimationFrame 或 lodash throttle 優化性能。
• 無障礙支持：為縮略圖添加 tabindex 與鍵盤焦點樣式，確保鍵盤用戶也能觸發預覽。

總結

利用 jQuery 的事件委託與 CSS 固定定位，僅需少量代碼即可實現優雅的圖片懸停預覽。實際項目中建議封裝為可複用組件，並結合現代前端框架（Vue/React）進一步提升維護性。