如何使用CSS和JS实现鼠标移动到图片上的时候实现图片的放大和缩小效果。

可以通过监听鼠标的移入（mouseenter）和移出（mouseleave）事件，在事件处理函数中改变图片的大小。以下是一个简单的实现示例：

HTML:

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

CSS:

.image-container {
  width: 200px; /* 设置容器宽度 */
  height: 200px; /* 设置容器高度 */
  overflow: hidden; /* 隐藏超出容器的部分 */
}
 
.image-container img {
  width: 100%; /* 设置图片宽度为容器宽度 */
  transition: transform 0.3s ease; /* 设置变换效果 */
}

JavaScript:

document.querySelector('.image-container').addEventListener('mouseenter', function() {
  this.querySelector('img').style.transform = 'scale(1.2)'; // 鼠标移入放大图片
});
 
document.querySelector('.image-container').addEventListener('mouseleave', function() {
  this.querySelector('img').style.transform = 'scale(1)'; // 鼠标移出恢复原大小
});

在上述代码中，.image-container 是包含图片的容器，当鼠标移入时，图片会放大 20%，移出后恢复原始大小。通过 CSS 的 transition 属性可以使得放大和缩小过程平滑。