首先，需要在HTML文档中添加一个容器元素，其中包含一个缩略图和一个放大镜图像，例如：
<div class="container">
<img src="thumbnail.jpg" class="thumbnail">
<div class="magnifier"></div>
</div>接下来，可以使用CSS样式来设置容器和图像的位置和大小。例如：
.container {
position: relative;
width: 400px;
height: 300px;
}
.thumbnail {
width: 100%;
height: 100%;
}
.magnifier {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid black;
background-repeat: no-repeat;
background-size: 800px 600px;
display: none;
}注意，放大镜图像应该设置为display: none，以便在页面加载时隐藏。
现在，可以使用JavaScript来实现放大镜效果。可以使用鼠标事件监听器来检测鼠标在缩略图上的移动，并相应地更新放大镜图像的位置和内容。例如：
const container = document.querySelector('.container');
const thumbnail = document.querySelector('.thumbnail');
const magnifier = document.querySelector('.magnifier');
container.addEventListener('mousemove', e => {
// 计算鼠标在缩略图内的位置
const x = e.clientX - container.getBoundingClientRect().left;
const y = e.clientY - container.getBoundingClientRect().top;
// 更新放大镜的位置
const magnifierX = x - magnifier.offsetWidth / 2;
const magnifierY = y - magnifier.offsetHeight / 2;
magnifier.style.left = magnifierX + 'px';
magnifier.style.top = magnifierY + 'px';
// 更新放大镜的背景图像
const scaleX = thumbnail.offsetWidth / magnifier.offsetWidth;
const scaleY = thumbnail.offsetHeight / magnifier.offsetHeight;
const bgPosX = -x * scaleX;
const bgPosY = -y * scaleY;
magnifier.style.backgroundImage = `url(thumbnail.jpg)`;
magnifier.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`;
// 显示放大镜
magnifier.style.display = 'block';
});
container.addEventListener('mouseleave', e => {
// 隐藏放大镜
magnifier.style.display = 'none';
});在上面的代码中，鼠标移动事件监听器计算了鼠标在缩略图内的位置，并相应地更新了放大镜图像的位置和背景图像。最后，鼠标离开事件监听器隐藏了放大镜图像。
通过这些步骤，就可以创建一个简单的图片放大镜效果。