给出当鼠标放在大图上时，右侧显示放大效果的代码

这个功能通常被称为放大镜效果，可以使用以下代码实现：

HTML：

<div class="image-container">
  <img src="image.jpg" alt="Product Image" class="product-image">
  <div class="zoom-container"></div>
</div>

CSS：

.image-container {
  position: relative;
  overflow: hidden;
}

.product-image {
  display: block;
  width: 100%;
}

.zoom-container {
  position: absolute;
  top: 0;
  right: -150px; /* 调整放大镜位置 */
  width: 150px; /* 调整放大镜大小 */
  height: 150px; /* 调整放大镜大小 */
  border: 1px solid #ccc;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

JavaScript：

const image = document.querySelector('.product-image');
const zoomContainer = document.querySelector('.zoom-container');

image.addEventListener('mousemove', function(e) {
  const x = e.clientX - e.target.offsetLeft;
  const y = e.clientY - e.target.offsetTop;
  const zoomX = x / e.target.offsetWidth * 100;
  const zoomY = y / e.target.offsetHeight * 100;
  zoomContainer.style.backgroundImage = `url(${e.target.src})`;
  zoomContainer.style.backgroundPosition = `${zoomX}% ${zoomY}%`;
});

image.addEventListener('mouseleave', function() {
  zoomContainer.style.backgroundImage = '';
});

以上代码会在图片上绑定鼠标移动事件，每次移动时会计算出鼠标在图片中的位置，然后根据位置将放大镜中的背景图片调整为对应位置的图片，并且调整背景图片的位置，实现放大镜的效果。