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()
方法分别监听 mouseenter
和 mouseleave
事件,当鼠标移入时将图片放大(通过修改样式 transform
属性),当鼠标移出时将图片恢复原始大小。
在 CSS 部分,我们使用了 transition
属性来定义图片变化效果的持续时间和缓动函数,以及 :hover
伪类来定义鼠标移入时的效果。
文章来源:https://blog.csdn.net/qq_42431718/article/details/135055272
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!