我們經常會在網站的商品展示頁中看到放大鏡功能的設計，這個功能讓用戶可以更清晰地查看商品的細節，提高用戶的購物體驗。今天，我們就來探討一種利用CSS和HTML實現放大鏡效果的方法。

首先，我們需要在HTML中添加商品圖片和放大鏡框，我們可以使用div標簽來作為放大鏡框的容器，并設置好它的樣式。

<div class="hover-box"><img src="product-img.jpg" alt="商品圖片"><div class="glass"></div></div>

然后，我們需要在CSS中為容器和放大鏡框進行樣式設置，具體方法如下：

/*給容器設置寬度和高度，以及邊框樣式*/
.hover-box{
width: 500px;
height: 500px;
border: 1px solid #ccc;
position: relative;
}
/*設置圖片占滿整個容器*/
.hover-box img{
width: 100%;
height: 100%;
}
/* 設置放大鏡框大小和定位 */
.glass{
width: 200px;
height: 200px;
border: 1px solid #ccc;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
z-index: 999;
}

接下來，我們需要在JS中為容器設置鼠標移動事件，實現放大鏡的功能：

let hoverBox = document.querySelector('.hover-box'),
glass = document.querySelector('.glass'),
img = document.querySelector('img'),
ratio = 2; //設置放大倍數
hoverBox.onmouseenter = function(){
glass.style.visibility = 'visible';
}
hoverBox.onmouseleave = function(){
glass.style.visibility = 'hidden';
}
hoverBox.onmousemove = function(event){
let x = event.clientX - hoverBox.offsetLeft,
y = event.clientY - hoverBox.offsetTop,
glassX = x - glass.offsetWidth / ratio / 2,
glassY = y - glass.offsetHeight / ratio / 2,
maxGlassX = hoverBox.offsetWidth - glass.offsetWidth / ratio,
maxGlassY = hoverBox.offsetHeight - glass.offsetHeight / ratio,
maxImgX = img.offsetWidth - hoverBox.offsetWidth,
maxImgY = img.offsetHeight - hoverBox.offsetHeight;
if(glassX< 0) glassX = 0;
if(glassY< 0) glassY = 0;
if(glassX >maxGlassX) glassX = maxGlassX;
if(glassY >maxGlassY) glassY = maxGlassY;
glass.style.left = glassX + 'px';
glass.style.top = glassY + 'px';
img.style.left = -glassX * ratio + 'px';
img.style.top = -glassY * ratio + 'px';
if(img.offsetLeft< -maxImgX) img.style.left = -maxImgX +'px';
if(img.offsetTop< -maxImgY) img.style.top = -maxImgY + 'px';
}

以上就是實現放大鏡效果的代碼，我們可以根據實際情況進行一些微調和樣式修改。通過這篇文章的學習，相信你也可以輕松實現一個漂亮的放大鏡效果。