要在 HTML 中实现图片放大镜效果，可以使用以下步骤：
background-image 属性设置放大的图片，根据鼠标位置计算需要显示的部分。以下是示例代码：
<!-- HTML -->
<div class="container">
<img src="image.jpg" alt="图片">
<div class="magnifier"></div>
</div>/* CSS */
.container {
position: relative;
}
.magnifier {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid #ccc;
display: none;
}// JavaScript
var container = document.querySelector('.container');
var magnifier = document.querySelector('.magnifier');
container.addEventListener('mousemove', function(event) {
var x = event.clientX - container.offsetLeft;
var y = event.clientY - container.offsetTop;
var mx = x - magnifier.offsetWidth / 2;
var my = y - magnifier.offsetHeight / 2;
if (mx < 0) {
mx = 0;
}
if (my < 0) {
my = 0;
}
if (mx > container.offsetWidth - magnifier.offsetWidth) {
mx = container.offsetWidth - magnifier.offsetWidth;
}
if (my > container.offsetHeight - magnifier.offsetHeight) {
my = container.offsetHeight - magnifier.offsetHeight;
}
magnifier.style.left = mx + 'px';
magnifier.style.top = my + 'px';
magnifier.style.display = 'block';
magnifier.style.backgroundImage = 'url(image.jpg)';
magnifier.style.backgroundPosition = '-' + (x * 2) + 'px -' + (y * 2) + 'px';
});
container.addEventListener('mouseout', function() {
magnifier.style.display = 'none';
});在上述示例中，容器元素使用 position: relative 设置相对定位，使得放大镜可以使用 position: absolute 相对于容器定位。放大镜使用半径为 50% 的圆形边框，并使用 rgba() 函数设置半透明的背景颜色。在鼠标移动事件中，通过计算鼠标位置和放大镜大小，设置放大镜的位置和显示内容。最后在鼠标移出事件中隐藏放大镜。