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

2023-12-19 22:45:17

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() 方法分别监听 mouseentermouseleave 事件,当鼠标移入时将图片放大(通过修改样式 transform 属性),当鼠标移出时将图片恢复原始大小。

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

文章来源:https://blog.csdn.net/qq_42431718/article/details/135055272
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。