js获取图片dom 鼠标移上去 图片放大

JavaScript 获取 图片元素，并在鼠标移上去时放大图片的示例代码：

HTML:

<div class="hoverImg">
  <img src="image.jpg" alt="图片">
</div>

CSS:

.hoverImg {
  position: relative;
  overflow: hidden;
  width: 200px; /* 图片容器的宽度 */
  height: 200px; /* 图片容器的高度 */
}

.hoverImg img {
  transition: transform .3s ease-in-out;
  max-width: 100%;
  max-height: 100%;
}

.hoverImg:hover img {
  transform: scale(1.2); /* 放大比例为 1.2 */
  cursor: pointer; /* 鼠标光标变成手形 */
}

JavaScript:

const hoverImg = document.querySelector('.hoverImg');
const img = hoverImg.querySelector('img');

hoverImg.addEventListener('mouseenter', () => {
  img.style.transform = 'scale(1.2)';
});

hoverImg.addEventListener('mouseleave', () => {
  img.style.transform = 'scale(1)';
});

这段代码中，我们首先使用 document.querySelector() 方法获取到 hoverImg 元素及其内部的 img 标签。然后使用 addEventListener() 方法分别监听 mouseenter 和 mouseleave 事件，当鼠标移入时将图片放大（通过修改样式 transform 属性），当鼠标移出时将图片恢复原始大小。

在 CSS 部分，我们使用了 transition 属性来定义图片变化效果的持续时间和缓动函数，以及 :hover 伪类来定义鼠标移入时的效果。