實現圖片放大鏡效果的關鍵在于結合html結構、css樣式和JavaScript邏輯，動態展示放大區域。具體步驟如下：1. 準備小圖和高清大圖，并構建包含小圖、放大鏡層和大圖的html結構；2. 使用css設置容器為相對定位，放大鏡為絕對定位并隱藏，默認不顯示大圖；3. 通過javascript監聽鼠標事件，計算鼠標位置并控制放大鏡移動范圍，動態調整大圖背景位置以實現放大效果；4. 在鼠標進入或離開容器時控制放大鏡和大圖的顯示與隱藏；5. 可通過requestanimationframe優化性能，提升用戶體驗；6. 針對不同尺寸圖片，使用比例換算確保放大區域準確對應；7. 移動端需替換為touch事件，并處理觸摸坐標和滾動沖突問題。
實現圖片放大鏡效果，核心在于利用鼠標事件和CSS樣式，動態地調整放大區域的顯示。簡單來說，就是在鼠標懸停在小圖上時，顯示一個放大后的區域，這個區域會跟隨鼠標移動，展示圖片的不同部分。
解決方案：
首先，你需要兩張圖片：一張是正常顯示的小圖，另一張是高清大圖。HTML結構大致如下：
立即學習“前端免費學習筆記（深入）”；
<div class="img-container"> @@##@@ <div id="lens"></div> @@##@@ </div>
接下來，是關鍵的CSS樣式。img-container需要設置position: relative，這樣放大鏡#lens才能相對于它定位。#lens就是放大鏡本身，通常是一個帶有背景圖片的div。#large-img初始時隱藏，鼠標懸停時才顯示。
.img-container { position: relative; width: 300px; /* 小圖寬度 */ height: 200px; /* 小圖高度 */ } #small-img { width: 100%; height: 100%; object-fit: cover; /* 保持圖片比例 */ } #lens { position: absolute; width: 50px; /* 放大鏡寬度 */ height: 50px; /* 放大鏡高度 */ border: 1px solid #ccc; background-repeat: no-repeat; cursor: none; /* 隱藏鼠標指針 */ display: none; /* 初始隱藏 */ } #large-img { position: absolute; left: 320px; /* 放在小圖旁邊 */ width: 600px; /* 大圖寬度 */ height: 400px; /* 大圖高度 */ object-fit: cover; display: none; border: 1px solid #ccc; }
最后，JavaScript負責處理鼠標事件和動態調整樣式。你需要監聽mousemove事件，計算鼠標在小圖上的位置，并相應地調整#lens和#large-img的背景位置。
const container = document.querySelector('.img-container'); const smallImg = document.getElementById('small-img'); const lens = document.getElementById('lens'); const largeImg = document.getElementById('large-img'); container.addEventListener('mousemove', (e) => { const x = e.clientX - container.offsetLeft; const y = e.clientY - container.offsetTop; // 限制放大鏡在圖片范圍內移動 let lensX = x - lens.offsetWidth / 2; let lensY = y - lens.offsetHeight / 2; lensX = Math.max(0, Math.min(lensX, smallImg.offsetWidth - lens.offsetWidth)); lensY = Math.max(0, Math.min(lensY, smallImg.offsetHeight - lens.offsetHeight)); lens.style.left = lensX + 'px'; lens.style.top = lensY + 'px'; largeImg.style.backgroundPosition = `-${lensX * (largeImg.offsetWidth / smallImg.offsetWidth)}px -${lensY * (largeImg.offsetHeight / smallImg.offsetHeight)}px`; }); container.addEventListener('mouseenter', () => { lens.style.display = 'block'; largeImg.style.display = 'block'; largeImg.style.backgroundImage = `url(${largeImg.src})`; // 設置大圖背景 }); container.addEventListener('mouseleave', () => { lens.style.display = 'none'; largeImg.style.display = 'none'; });
代碼解釋：計算鼠標位置，確保放大鏡不會超出小圖邊界，動態設置放大鏡的位置和背景圖的位置。mouseenter和mouseleave事件控制放大鏡和高清圖的顯示與隱藏。
放大鏡效果的優化方向有哪些？
可以從性能和用戶體驗兩方面入手。性能方面，避免頻繁觸發mousemove事件，可以考慮使用requestAnimationFrame來優化動畫。用戶體驗方面，可以調整放大倍數、放大鏡的形狀和樣式，甚至加入一些過渡動畫，讓效果更平滑自然。
如何處理不同尺寸的圖片？
關鍵在于計算放大倍數。在JavaScript中，你需要獲取小圖和大圖的尺寸，然后計算出放大比例。在設置#large-img的backgroundPosition時，需要根據這個比例進行調整。例如：
const zoomFactorX = largeImg.offsetWidth / smallImg.offsetWidth; const zoomFactorY = largeImg.offsetHeight / smallImg.offsetHeight; largeImg.style.backgroundPosition = `-${lensX * zoomFactorX}px -${lensY * zoomFactorY}px`;
放大鏡在移動端如何實現？
移動端沒有mousemove事件，需要使用touchmove事件。同時，還需要考慮觸摸點的坐標計算方式，以及如何避免觸摸事件與頁面滾動沖突。一個簡單的實現思路是，監聽touchstart事件，記錄初始觸摸點的位置，然后在touchmove事件中，根據觸摸點的移動距離，來調整放大鏡的位置。需要注意的是，移動端的性能優化更加重要，避免卡頓。
