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

本文主要是介绍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 伪类来定义鼠标移入时的效果。

这篇关于js获取图片dom 鼠标移上去 图片放大的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---